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INTRODUCTION 



Welcome to Learn HTML and CSS with w3schools. This book is for Web users learn- 
ing to create their own Web pages using HTML, the standard tagging language for 
the World Wide Web. 

w3schools (www.w3schools.com) is one of the top Web destinations to learn HMTL and 
many other key Web languages. w3schools' tutorials are recommended reading in more 
than 100 universities and high schools all over the world. This book is a great companion 
to the HTML and CSS tutorials on the w3schools site, which were written by Hege Ref- 
snes, Stale Refsnes, Kai Jim Refsnes, and Jan Egil Refsnes. 

Like the w3schools online tutorials, this book features a brief presentation of each topic, 
trading lengthy explanations for abundant examples showcasing each key feature. This 
book, as well as other w3schools books published by Wiley, features straightforward and 
concise tutorials on each topic from which the beginning Web developer can easily learn. 
All of the books content is derived from w3schools' accurate, user-tested content used by 
millions of learners every month. 

HTML 

With HTML, you can create your own Web site. HTML is the core technology in which 
all Web pages are written. This tutorial teaches you everything about HTML. HTML is 
easy to learn — you will enjoy it. 

What You Should Already Know 

Before you continue, you should have a basic understanding of how to use a browser to 
view pages on the Web. 

If you want to study these subjects first, please read The Internet For Dummies, 12th Edi- 
tion, also from Wiley Publishing. 

What is HTML? 

HTML is a language for describing Web pages. 

HTML stands for HyperText Markup Language. 

HTML is not a programming language, it is a markup language. 

A markup language is a collection of markup tags. 

HTML uses markup tags to describe Web pages. 
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What are Tags? 

HTML markup tags are usually called HTML tags or just tags. 
HTML tags are keywords surrounded by angle brackets like <html>. 
HTML tags normally come in pairs, like <b> and </b>. 
The first tag in a pair is the start tag; the second tag is the end tag. 
Start and end tags are also called opening tags and closing tags, 

HTML Documents = Web Pages 

H HTML documents describe Web pages. 

HTML documents contain HTML tags and plain text. 

HTML documents are also called Web pages. 

The purpose of a Web browser (like Internet Explorer or Mozilla Firefox) is to read 
HTML documents and display them as Web pages. The browser does not display 
the HTML tags, but uses the tags to interpret the content of the page. In your 
browser, it looks like figure LI. 

<htnfl> 
<body> 

<hl>My First Headi ng</lil> 

<p>My first paragraph</p> 

</body> 
</htm~l> 

In the previous code example, 
f The text between <html> and </htmI> describes the Web page. 
The text between <body> and </body> is the visible page content. 
The text between <hl> and </hl> is displayed as a heading. 
The text between <p> and </p> is displayed as a paragraph. 

My First Heading 

My first paragraph 



Figure 1.1 
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How to Use This Book 

Throughout this book, you will see several icons: 



Try it yourself » 



The Try It Yourself icon indicates an opportunity for you to practice what you've just 
learned. The code and examples under this icon come from examples on the w3schools 
site, which allow you to make changes to the code and see the results immediately You do 
not have to type the code examples in this book; you can find them all on the w3schools 
site. 

EThe w3schools icon indicates that more information is available on the 
w3 schools site. 



f \ This icon indicates where you will find further information about a topic that 
is covered more thoroughly elsewhere within the book. 



Notes call yourattention to important information you need to know 
before proceeding. 



[ 



TIP 



Tips provide you with suggested shortcuts and information to help you be 
more productive. 



This book is divided into three sections: 

►► Section I: HTML Basic 

» Section II: HTML/ CSS Advanced 

Section III: Appendixes 

If you're eager to improve your Web pages and to add some interactivity jump right 
in with HTML basics. Plenty of examples and opportunities to try things await, and 
w3schools will be right there when you need them! 
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Section I 
HTML Basic 



□ Chapter I : HTML Getting Started 

□ Chapter 2: HTML Fundamentals 

□ Chapter 3: HTML Elements 

□ Chapter 4: HTML Attributes 

□ Chapter 5: HTML Headings, Rules, & Comments 

□ Chapter 6: HTML Paragraphs 

□ Chapter 7: HTML Text Formatting 

□ Chapter 8: HTML Styles 

□ Chapter 9: HTML Links 

□ Chapter 1 0: HTML Images 

□ Chapter 1 1 : HTML Tables 

□ Chapter 12: HTML Lists 

□ Chapter 13: HTML Forms & Input 

□ Chapter 1 4: HTML Colors 

□ Chapter 1 5: HTML 4.01 Quick List 



CHAPTER 1 

HTML 

GETTING STARTED 



In This Chapter 



□ What You Need 



□ 



HTML Editors 



□ 



Create Your Own Test Web 



□ 



.HTM or .HTML Extension? 



What You Need 



It's simple to get started writing HTML. 

You don't need any tools to learn HTML with w3schools. 
►► You don't need an HTML editor. 
You don't need a Web server. 
You don't need a Web site. 



In this tutorial, we use a plain text editor (like Notepad) to edit HTML. We believe 
this is the best way to learn HTML. 

Instead of writing plain text, however, professional Web developers often prefer using 
HTML editors like FrontPage or Dreamweaver because they offer code-writing 
shortcuts and helpful features. 



HTML Editors 
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Create Your Own Test Web 

We suggest you experiment with everything you learn in this book by editing your 
Web files with a text editor (like Notepad) and opening them in Internet Explorer 
to view the results. 

To create a test Web on your own computer, just copy the following three files from 
the w3schools Web site to your desktop. 

Ehttp:/ /www. w3schools.com/html/ mainpage.htm 
http:/ /www. w3schools.com/html/ page 1 ,htm 
http :/ / www. w3 schools ,com/html/page2 .htm 

After you have copied the files, double-click on the file called mainpage.htm and see 
your first Web site in action. 

If your test Web contains HTML markup tags you have not learnedj don't 
panic. 

You will learn all about markup tags in the next chapters. 

.HTM or .HTML Extension? 

When you save an HTML file, you can use either the .htm or the .html extension. 
We use .htm in our examples. It is a habit from the past, when the software only 
allowed three letters in file extensions. 

In most cases, it is perfectly safe to use .html. 

The w3schools Web site contains a wealth oi helpful tools to help you 
^^SC learn HTML, including hundreds of cut-and-paste examples, an online 
Bm* text editor, an HTML Color Picker, quizzes to test your knowledge, and 
an abundance of Web-building reference tables. We recommend you 
refer to the Web site often as you work through this book. http://www. 
w3schools .com/html 
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CHAPTER 2 

HTML 
FUNDAMENTALS 



In This Chapter 

□ HTML Headings 

□ HTML Paragraphs 

□ HTML Links 

□ HTML Images 

HTML Headings 

HTML headings are defined with the <hl> to <h6> tags. The lower the number, 
the larger the heading size, as shown in Figure 2.1. 

Don't worry if the examples use tags you have not learned. You will learn 
more about tags in the next chapters. 



Try it yourself » 



<html> 
<body> 

<hl>This is Heading l</hl> 

<h2>Heading 2 is Small er</h2> 

<h3>Heading 3 is Smaller Still</h3> 

</body> 
</html> 

(continued) 
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(continued) 



This is Heading 1 

Heading 2 is Smaller 
Heading 3 is Smaller Still 

Figure 2.1 



HTML Paragraphs 

HTML paragraphs are defined with the <p> tag. Most browsers automatically put 
a line break and space after a </p> tag, as shown in Figure 2.2. 



Try it yourself » 



<htm"l> 
<body> 

<p>This is a paragraph . </p> 
<p>This is a paragraph . </p> 
<p>This is a paragraph . </p> 

</body> 
</htm"l> 

This is a paragraph. 
This is a paragraph. 
This is a paragraph. 

Figure 2.2 
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HTML Links 

HTML links are defined with the <a> tag, as shown in Figure 2.3. 



Try it yourself » 



<htm"l> 
<body> 

<a href="http://www.w3schools.com">This is a link to the 
w3schools web site.</a> 

</body> 
</html> 



This is a link to the w 3 schools Web site. 



Figure 2.3 



The URL address is an attribute of the link element. You will learn about 
attributes in Chapter 4, HTML Attributes. 

HTML Images 

HTML images are defined with the <i mg> tag. It tells the browser where to find the 
image file and what size to display it, among other things. The results of this code 
example are shown in Figure 2.4. 



Try it yourself » 



<htm"l> 
<body> 

<img src="w3school s . jpg" width="104" height="142" /> 

</body> 
</html> 
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Figure 2.4 



^ f-v The source name and size of the image are attributes of the image element. 

r You will learn about attributes in Chapter 4, "HTML Attributes." 
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CHAPTER 3 

HTML ELEMENTS 



In This Chapter 

□ HTML Elements 

□ HTML Element Syntax 
Q Nested Elements 

□ Don't Forget the End Tag 

□ Empty HTML Elements 

□ Use Lowercase Tags 



HTML Elements 



HTML documents are defined by HTML elements. An HTML element is every- 
thing between the start tag and the end tag. The start tag is often called the opening 
tag. The end tag is often called the closing tag. 



OPENINGTAG 


ELEMENT CONTENT 


CLOSING TAG 


<P> 


This is a paragraph. 


</p> 


<a href="defa u rt.htm" > 


This is a link. 


</a> 


<br /> 







HTML Element Syntax 

HTML elements follow a certain format regardless of how the element is used. 
An HTML element starts with a start tag/ opening tag. 
An HTML element ends with an end tag/closing tag. 
The element content is everything between the start and the end tag. 
Some HTML elements have empty content. 
Empty elements are closed in the start tag. 
» Most HTML elements can have attributes. 

You will learn more about attributes in Chapter 4, HTML Attributes. 
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Nested Elements 

Most HTML elements can be nested (contain or be contained within other HTML 
elements). HTML documents consist of nested HTML elements. 

The following example contains three HTML elements. Notice that the <p> 
element is nested in the <body> element, which in turn is nested in the <html> 
element. The results of these tags are shown in Figure 3.1. 

<htm~l> 
<body> 

<p>This is my first paragraph</p> 

</body> 
</htm"l> 

This is my first paragraph 

Figure 3.1 

The <p> element 

The <p> element is among the most common of elements. 
<p>This is my first paragraph</p> 

►► The <p> element defines a new paragraph in the HTML document. 

The element has a start tag <p> and an end tag </p>. 
►► The element content is: This is my first paragraph. 

The <body> element 

The <body> element defines the body of the HTML document. 
<body> 

<p>This is my first paragraph</p> 
</body> 
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The element has a start tag <body> and an end tag </body>. 

The element content is another HTML element (one or more paragraphs). 
There are usually dozens of elements within the body element. 



The <html> element 

The <html> element defines the entire HTML document. 
<htm"l> 

<body> 

<p>This is my first paragraph</p> 
</body> 

</html> 

The element has a start tag <html > and an end tag </html >. 
The element content is another HTML element (the body) . 

Don't Forget the End Tag 

Most browsers will display HTML correctly even if you forget the end tag. 

<p>This is a paragraph 
<p>This is another paragraph 

The previous example will work in most browsers, but don't rely on it. Forgetting 
the end tag can produce unexpected results or errors. 



NOTE 



Future versions of HTML will not allow you to skip end tags. 
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Empty HTML Elements 

HTML elements without content are called empty elements. Empty elements can 
be closed within the start tag. 

<br> is an empty element without a closing tag. It defines a line break. 

In XML and future versions of HTML, all elements must be closed. 

Adding a slash to the end of start tag, like <br/>, is the proper way of closing empty 
elements, accepted by HTML, and XML. 

Even if <b r> works in all browsers, writing <b r/> instead is more future proof. 

Use Lowercase Tags 

HTML tags are not case sensitive: <P> means the same as <p>. Plenty of Web sites 
use uppercase HTML tags in their pages. 

w3schools uses lowercase tags because the World Wide Web Consortium (W3C) 
recommends lowercase in HTML 4. 
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CHAPTER 4 

HTML ATTRIBUTES 



In This Chapter 

□ Standard HTML Attributes 

□ Defining Attribute Values 

□ HTML Attributes Reference 

Standard HTML Attributes 

Attributes provide additional information about HTML elements. 
HTML elements can have attributes. 
>'> Attributes provide additional information about the element. 
Attributes are always specified in the start tag. 
Attributes come in name/value pairs like: name="val ue" . 

Defining Attribute Values 

Attribute values should always be enclosed within quotation marks. While 
"double quotes" are the most common, single-style quotes (also called primes) are 
also allowed. In some rare situations, like when the attribute value itself includes 
quotation marks, it is necessary to use primes. For example: 

name=']ohn "Shotgun" Nelson' 

As another example, HTML links are defined with the <a> tag. The Web address, 
surrounded by quotation marks, is the value of the attribute of the link element. 
The results appear in Figure 4. 1 . 

<a href="http: //www.w3schoo1 s . com">Thi s is a ~link</a> to the 
w3schools Web site. 

This is a link to the w3 schools Web site. 



Figure 4-1 
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TIP 



Attribute names and values are not case sensitive. However, the World Wide 
Web Consortium (W3C) recommends using lowercase attributes and values in its HTML 
4 recommendation. Later versions require using lowercase. 



HTML Attributes Reference 

Table 4.1 lists some attributes that are standard for most HTML elements. 



Table 4.1 : Core Attributes 



Attribute 


Value 


Description 


class 


class_rule or style_rule 


The class of the element 


id 


id_name 


A unique id for the element 


style 


style_definition 


An inline style definition 


title 


toolti p_text 


A text to d isplay in a tool tip 



LLLHIi3 A specific id may only appear once in a web page, while class refers to a 
class of elements that may appear many times in the same page. 



The attributes listed in these references are standard and are supported by all HTML 
tags (with a few exceptions) . A full list of legal attributes for each HTML element is 
listed in the w3schools Complete HTML Reference online at: 



5? 

ht tp •//www. w3 schools .com/tags/ default , asp 

For more information about standard attributes, see the HTML Standard Attri- 
butes Reference online at: 

5? 

^ktf http:/ /www,w3schools. com/ tags/ refstandardattribu tes.asp 
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CHAPTER 5 

HTML HEADINGS, 
RULES, & COMMENTS 



In This Chapter 

□ HTML Headings 

□ HTML Rules (Lines) 

□ HTML Comments 

□ Viewing HTML Source Code 



HTML Headings 

Because users may skim your pages by their headings, it is important to use 
headings to show the document structure. Headings are defined, from largest to 
smallest, with the <hl> to <h6> tags. 

HI headings should be used as main headings, followed by H2 headings, then less 
important H3 headings, and so on. You can compare the appearance of the head- 
ings in Figure 5.1. 



Try » j^^^^^^^^^^^^^^^^^^^^^^^^l 


<hl>This is a Heading 


l</hl> 


<h2>This is a Heading 


2</h2> 


<h3>This is a Heading 


3</h3> 


<h4>This is a Heading 


4</h4> 


<h5>This is a Heading 


5</h5> 


<h6>This is a Heading 


6</h6> 
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This is a Heading 1 

This is a Heading 2 
This is a Heading 3 
Tkis is a Heading 4 



This b i Boding 5 
flu* u » Heading 6 



Figure 5.1 



Use HTML headings for headings only. Don't use headings to make text BIG or 
bold. 

Search engines use your headings to index the structure and content ofyour Web pages. 



[ 



NOTE 



Browsers automatically add an empty line before and after headings. 



HTML Rules (Lines) 



The <hr/> tag is used to create a horizontal rule (line) across the browser page. 
Rules are often used to separate sections of a document, as shown in Figure 5.2, or 
to show a visual break. 



Try it yourself » 



<html> 
<body> 

<p>The hr tag defines a horizontal rule:</p> 
<hr /> 

<p>This is a paragraph</p> 
<hr /> 

<p>This is a paragraph</p> 
<hr /> 

<p>This is a paragraph</p> 



</body> 
</html> 
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The hi tag defties a horizontal rule: 



This is a paragraph 



This is a paragraph 



This is a paragraph 



Figure 5.2 



HTML Comments 



Comments can be inserted in the HTML code to make it more readable and under- 
standable, Comments are ignored by the browser and are not displayed, as demon- 
strated in Figure 5-3. 

Comments are written like this: 



Try it yourself » 



<htm~l> 
<body> 

<! — This comment will not be disp1ayed--> 
<p>This is a regular paragraph</p> 

</body> 
</html> 



This is a regular paragraph 



Figure 5,3 



NOTE 



Notice there is an exclamation point after the opening bracket, but 
not before the dosing bracket. 
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Viewing HTML Source Code 

Have you ever seen a Web page and wondered "Hey! How did they do that?" To 
find out, right-click in the page and select View Source (in Internet Explorer), View 
Page Source (in Firefox), or similar options for other browsers. This will open a 
window that shows you the HTML code of the page, as shown in Figure 5-4. 



<!DOCTYP£ fetal PUBLIC "-//IT3C//DTD XHTML 1.0 Transi tiond2//£W "Jittp.- //vvv .1 
<btml lang="en-tP3" aatl : lang =,T en-US" xmlns^-ftccp : //www, w3. oig/1999/x.1unLL"> 

<title>Tryit Editor vl.4</title> 

<2in)i rel="3tyle3heec" type="texc/css" href-" / tryic ■ ess " /> 
<soript typ«="cexc/ jsvaaeripc"> 
function displayadd 

I 

dacuraffnc .genElemen&Byld ( "acirrame") . arc— Vtryiclaanner . aap?aecia— cryfLtmlfirnsi"' 
) 

</acript> 
<body> 

<table width"™l!)0%" tjorder~"0" celXpadding""0" cellspacing""O r > 
<tr> 

<iframe id="adf name" atyle-"background-color : f f ff f f f " height-"9S" width-"S90 

arc-'/cryitbanr.tr , a3p?3ecid-try?-.tmI&rnd-0 . S10°36€ "x/if rame> 

</td> 

</tr> 

</table> 



Figure 5.4 



HTML Tag Reference 



The tag reference for w3schools contains additional information about these tags 
and their attributes. A full list of legal attributes for each HTML element is listed in 
the w3schools Complete HTML Reference online at: 

http :// www. w3 schools, com/ tags/ default, asp 
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CHAPTER 6 

HTML PARAGRAPHS 



In This Chapter 

□ HTML Paragraphs 

□ HTML Line Breaks 

□ HTML Output Tips 



HTML Paragraphs 



HTML documents are divided into paragraphs. Paragraphs are defined with die 
<p> tag. 

<p>Thi s i s a parag raph . </p> 



NOTE 



[ 



Most browsers automatically add an empty line before and after paragraphs. 



Don't Forget the End Tag 

Most browsers will display HTML correctly even if you forget the end tag: 

<p>This is a paragraph. 

<p>This is another paragraph .</p> 

This code will work in most browsers, but don't rely on it. Forgetting die end tag 
can produce unexpected results or errors. Future versions of HTML will not allow 
you to skip end tags. 
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HTML Line Breaks 

Use the <br /> tag if you want a line break (a new line) without starting a new 
paragraph. The <br /> element is an empty HTML element. It has no end tag. 
The results of this code are shown in Figure 6.1. 



Try it yourself » 



<htrri~l> 
<body> 

<p>This is<br />a para-<br />graph with line breaks</p> 

</body> 
</htm~l> 



This is 
a para- 
graph with line treaks 



Figure 6.1 



NOTE 



In XML and future versions of HTML, HTML elements with no end tag 
(closing tag) are not allowed. Even if <br> works in most browsers, writing <br /> 
instead is more future-proof and thus considered best practice. 



HTML Output Tips 

You can never be sure how HTML will be displayed. Large or small screens, differ- 
ent brands of browsers, and resized windows will create different results. 

Be aware that with HTML, you cannot change the output by adding extra spaces 
or extra lines in your HTML code. The browser will remove extra spaces and extra 
lines when the page is displayed. Any number of lines count as one space, and any 
number of spaces count as as one space. 

The following example shows how one might naturally think to format a passage of 
multiline text, but the results of that code, shown in Figure 6.2, remind you that the 
browser doesn't break the lines as you expect without a <br /> tag. 



24 



Chapter 6: HTML Paragraphs 







<html> 
<body> 



<P> 

My Bonnie lies over the ocean. 

My Bonnie lies over the sea. 

My Bonnie lies over the ocean. 

Oh, bring back my Bonnie to me. 

</p> 

<p>Note that your browser ignores your layout !</p> 

</body> 
</html> 



My Bonnie lies over the ocean My Bonnie lies over the sea My Bonnie lies 
over die ocean. Oh, bring back my Bonnie to me. 

Note that your browser ignores your layout! 



Figure 6.2 



The next example demonstrates some of the default behaviors of paragraph ele- 
ments. As you can see in Figure 6.3, despite the fact that they were typed very 
differently, the first two paragraphs end up looking similar to the third paragraph, 
which had no extraneous spaces or line breaks. 



Try it yourself » 



<html> 
<body> 

<P> 

This paragraph 
contains a lot of lines 
in the source code, 

but the browser (continued) 
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(continued) 
ignores it. 
</p> 

<p> 

This paragraph 

contains a lot of spaces 

in the source code, 
but the browser 
ignores it. 

</p> 

<P> 

The number of lines in a paragraph depends on the size of 
your browser window. If you resize the browser window, the 
number of lines in this paragraph will change. 

</p> 

</body> 
</htm1 > 



This paragraph contains a lot of lines in die source code, but the browser 
ignores it 

THs paragraph contains a lot of spaces in the source code, but the browser 
ignores it 

The number of lines is a paragraph depends on the size of your browser 
window. If you resize the browser window, the number of lines in this paragraph 
wjl change. 



Figure 6.3 



Complete Tag Reference 

The w3schools tag reference contains additional information about these rags and 
their attributes. A full list of legal attributes for each HTML element is listed in 
the w3schools Complete HTML Reference online at: 



http:/ /www.w3schools.com/tags/deraiilt.asp 
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HTML TEXT 
FORMATTING 



In This Chapter 

□ HTML Formatting Tags 
J Text Formatting 

J Preformatted Text 

Q "Computer Output" Tags 

—I Address 

Q Abbreviations and Acronyms 

□ Text Direction 

□ Quotations 

J Deleted and Inserted Text 



HTML Formatting Tags 

HTML uses tags like <b> and <i > to modify the appearance of text, like bold or 
italic. These HTML tags are called formatting tags. Refer to the end of this chapter 
for a complete reference. 
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Text Formatting 

The following example demonstrates how you can format text in an HTML docu- 
ment. The results appear in Figure 7.1. 



Try it yourself » 



<html> 
<body> 

<pxt»This text is bold</bx/p> 
<pxstrong>Thi s text is strong</strongx/p> 
<pxbig>This text is big</bigx/p> 
<pxem>This text is emphasi zed</emx/p> 
<pxi>This text is italic</ix/p> 
<pxsmaTI>Thi s text is small </smallx/p> 

<p>This is<sub> subscri pt</sub> and <sup>superscri pt</sup></ 
P> 

</body> 
</html> 

This text is bold 
This text is strong 

This text is big 
This text is emphasized 
This text is italic 
This ten is small 

This is subscript and su P Msa *' 
Figure 7.1 
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Preformatted Text 

This example demonstrates how you can control the line breaks, spaces, and char- 
acter widths with the <pre> tag. 

The results appear in Figure 7.2. You'll see more examples of computer 
output in the next section. 



Try it yourself » 



<html> 
<body> 

<pre> 
This is 

Preformatted text. 

It preserves both spaces 

and line breaks and shows the text in a monospace font. 
</pre> 

<p>The pre tag is good for displaying computer code:</p> 
<pre> 

for i = 1 to 10 

print i 
next i 
</pre> 

</body> 
</html> 



This 13 

Preformatted text. 

It preserves both spaces 

and line breaks and shows the text in a monospace font. 
The pre tag is good for displaying computer code: 

for i - 1 co 10 

print i 
next i 

Figure 7.2 
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"Computer Outpuf'Tags 

This example demonstrates how different "computer output" tags will be displayed. 
The results appear in Figure 7.3. 



Try it yourself » 



<htm"l> 
<body> 

<code>Computer code</code> 
<br /> 

<kbd>Keyboard input</kbd> 
<br /> 

<tt>Teletype text</tt> 
<br /> 

<samp>Sample text</samp> 
<br /> 

<var>Computer van' abl e</var> 
<br /> 

<P> 

<b>Note:</b> These tags are often used to display computer/ 
programming code on the page. 

</p> 

</body> 
</html> 



Computer code 
Keyboard input 
Teletype text 
Sa.nple text 

Computer variable 

Note: These tags are often used to display computer programming code on me 
page. 

Figure 7.3 
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Address 

This example demonstrates how to write an address in an HTML document. The 
results appear in Figure 7.4. 



Try it yourself » 



<htm"l> 
<body> 

<address> 
Donald Duck<br> 
BOX 555<br> 
Di sneyl and<br> 
USA 

</address> 

</body> 
</html> 



Donald Duck 
BOX 555 
Disneyland 
USA 

Figure 7.4 
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Abbreviations and Acronyms 

This example demonstrates how to handle an abbreviation or an acronym. The 
results appear in Figure 7.5. 



Try it yourself » 



<html> 
<body> 

<abbr ti tl e="uni ted Nations">UN</abbr> 
<br /> 

<acronym title="world Wide Web">www</acronym> 

<p>The title attribute is used to show the spell ed-out 
version when holding the mouse pointer over the acronym 
or abbreviation.</p> 

</body> 
</html> 



UN 

WWW 

The title attribute is used to show die spelled-out version when holding the 
mouse pointer over the acronym or abbreviation. 

Figure 7.5 
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Text Direction 

This example demonstrates how to change the text direction. The results appear in 
Figure 7.6. 



Try it yourself » 



<html> 
<body> 

<P> 

if your browser supports bidirectional override (bdo) , the 
next line will be written from the right to the left 
(rtl): 

</p> 

<bdo dir="rtl"> 

Here is some backward text 

</bdo> 

</body> 
</html> 



If your browser supports bidirectional override (bdo), the next line will be 
written from the right to the left (rtf): 

txet drawkcab emos si ereH 
Figure 7.6 
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Quotations 

This example demonstrates how to handle long and short quotations. The results 
appear in Figure 7.7. 



Try it yourself » 



<html> 
<body> 

A blockquote quotation: 
<bl ockquote> 

This is a long quotation. This is a long quotation. This is 
a long quotation. This is a long quotation. This is a long 
quotation . 

</blockquote> 

<pxb>The browser inserts line breaks and margins for a 
blockquote el ement . </bx/p> 

A short quotation: 

<q>This is a short quotati on</q> 

<pxb>The q element does not render as anything special. </ 

bx/p> 

</body> 
</html> 



A blockquote quotation: 

This is a long quotation. This is a long quotation. This is a long 
quotation. This is a long quotation. This is a long qnobdion. 

The browser inserts [me breaks aid margins for a Moduftote elemeat 

A short quotation: "Tins is a short quotation" 

The q elemeat noes not render as anything special 

Figure 7.7 
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Deleted and Inserted Text 

This example demonstrates how to mark a text that is deleted (strikethrough) or 
inserted (underscore) to a document. The results appear in Figure 7.8. 



Try it yourself » 



<html> 
<body> 

<P> 

a dozen is 

<del >twenty</del > 

<i ns>twel ve</i ns> 

pi eces 

</p> 

<P> 

Most browsers will <del>overstri ke</del> deleted text and 
<i ns>underscore</i ns> inserted text. 

</p> 
<P> 

Some older browsers will display deleted or inserted text as 
plain text. 

</p> 

</body> 
</html> 



a dozen is twenty twelve pieces 

Most browsers will o ve fstrik e deleted text and underscore inserted text. 
Some older browsers will display deleted or inserted text as plain text. 

Figure 7.8 
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Text Formatting Tags 

Examples of these tags' results appear in Figure 7.9. 



NOTE 



Many of these tags a re either deprecated or soon will be. Formatting 
with tags is very bad and should be done with CSS,and/ormore descriptive content 
driven tags. Additionally, the <em>, <strong>, <df n>, <code>, <samp>, <kbd>, 
<var>, and <ci te> tags are all phrase tags. They are not deprecated, but it is pos- 
sible to achieve richer effect with CSS. 



TAG 


DESCRIPTION 


<b> 


Defines bold text 


<big> 


Defines big text 


<ern> 


Defines emphasized text 


<i> 


Defines italic text 


<small> 


Defines small text 


<strong> 


Defines strong text 


<sub> 


Defines subscripted text 


<sup> 


Defines superscripted text 


<ins> 


Defines inserted text 


<del> 


Defines deleted text 


<s> 


Deprecated. Use <deb> instead 


<strike> 


Deprecated. Use <del> instead 


<L1> 


Deprecated. Use styles instead 



Defines bold text 

Defines big text 
Defines emphasized text 
Defines italic text 
Defines small text 
Defines strong text 
Defines subscripted text 
Defines superscripted teat 
Defines inserted text 
Defin e s del e ted test 



Figure 7.9 
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Computer Output Tags 

Examples of these tags' results appear in Figure 7.10. 



TAG 


DESCRIPTION 


<code> 


Defines computer code text 


<kbd> 


Defines keyboard text 


<samp> 


Defines sample computer code 


<tf> 


Defines teletype text 


<var> 


Defines a variable 


<pre> 


Defines preformatted text 


<listing> 


Deprecated. Use <pre> instead 


<plaintext> 


Deprecated. Use <pre> instead 


<xmp> 


Deprecated. Use <pre> instead 



Defines computer aode text 
Defines KeyDaard text 
Defines saatple computet code 
Dermes teletype text 
Defines a variable 
Defines preformatted text 

Figure 7.10 
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Citations, Quotations, and Definition 
Tags 

Examples of these tags' results appear in Figure 7. 1 1 . 



TAG 


DESCRIPTION 


<abbr> 


Defines an abbreviation 


<acronym> 


Defines an acronym 


<address> 


Defines an address element 


<bdo> 


Defines the text direction 


<blockquote> 


Defines a long quotation 


<q> 


Defines a short quotation 


<cite> 


Defines a citation 


<dfn> 


Defines a definition term 



Defines an abbre/viatioii 
D efines an acronym 
Defines an address element 
Defines the text direction 

Defines a tang quotation 
"Defines a short quotation' 1 
Defines a citation 
Defines a definition term 
Figure 7.1 1 
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HTML STYLES 



In This Chapter 

□ HTML Style Attribute 

□ Deprecated Tags and Attributes 

□ Common HTML Styles 

The HTML Style Attribute 

The styl e attribute is a new HTML attribute. It introduces the use of CSS in 
HTML. The purpose of the styl e attribute is to provide a common way to style 
all HTML elements. 

Styles were introduced with HTML 4 as the new and preferred way to style HTML 
elements. With HTML styles, formatting and attributes can be added to HTML 
elements directly by using the styl e attribute, or indirectly in separate Cascading 
Style Sheets (CSS files). 

In this book, we use the styl e attribute to introduce you to HTML styles 
and CSS. You can learn more about styles and CSS in our tutorial, Learn 
CSS with w3schooJs. 

The code in the following example and the results in Figure 8.1 introduce you to a 
new way of adding formatting to a document. 



Try it yourself » 



<html > 

<body style="background-color:Gray; "> 

<hl>Look! Styles and colors</hl> 

<p style="font-fam"ily:verdana;color: red"> 
This text is in Verdana and red</p> 

<p styl e=" font- f ami 1 y : times ; col or : green "> 
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This text is in Times and green</p> 

<p sty! e="font-size: 30px">Thi s text is 30 pixels high</p> 

</body> 
</htm~l> 



Look! Styles and colors 

This text is In Verdana and red 

Has text is in Times and green 

This text is 30 pixels high 



Figure 8,1 



E Because this book is not printed in color, it might be difficult to see the 
results dealing with in the figures. To see how the results look on the screen, 
enter this code into the Try It Yourself text editor at w3schools.com. 

Deprecated Tags and Attributes 

In HTML 4, some tags and attributes are defined as deprecated. Deprecated means 
that they will not be supported in future versions of HTML and The message is 
clear: Avoid the use of deprecated rags and attributes. 

These tags and attributes should be avoided, and styles should be used instead: 



TAGS 


DESCRIPTION 


<center> 


Defines centered content 


<font> and <basefont> 


Defines HTML fonts 


<s> and <strike> 


Defines strikeout text 


<u> 


Defines underlined text 


ATTRIBUTES 


DESCRIPTION 


align 


Defines the alignment of text 


bgcolor 


Defines the background color 


color 


Defines the text color 
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Common HTML Styles 

Background Color 

<body styl e=" background -col or : gray"> 

The styl e attribute defines a style for the <body> element. The results of the style 
code appear in Figure 8.2. 



Try it yourself » 



<html> 

<body styl e=" background -col or : gray"> 
<h2>Look: Colored Background ! </h2> 

</body> 
</html> 



Look: Colored Background! 

Figure 8.2 



The new styl e attribute makes the "old" bgcol or attribute, shown in Figure 8.3, 
obsolete. 



Try it yourself » 



<html> 

<body bgcol or="gray"> 

<h2>Look: Colored Background ! </h2> 

<p>For future-proof HTML, use HTML styles instead :</p> 
<p>styl e="backg round-col or : gray"</p> 

</body> 
</html> 
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Look: Colored Background! 

For future-proof HTML, use HTML styles instead 
style="backgrouod-cok>rgray" 
Figure 8.3 



Font Family, Color, and Size 

The styl e attribute defines a style for the <p> element, as shown in Figure 8.4: 



Try it yourself » 



<html> 
<body> 

<hl styl e="f ont-f ami! y:verdana">A headi ng</hl> 

<p style="font-family:courier new; color: red; font- 
si ze : 20px ; ">A paragraph</p> 

</body> 
</html> 



A heading 

A paragraph 



Figure 8.4 



The new styl e attribute makes the old <f ont> tag, shown in Figure 8.5, obsolete. 



Try it yourself » 



<html> 
<body> 

<pxfont size="2" face="verdana"> 
This is a paragraph. 
</fontx/p> 
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<pxfont size="5" face="Times" color="red"> 

This is another paragraph. 

</fontx/p> 

</body> 
</html> 



This is a paragraph. 

This is another paragraph. 

Figure 8.5 



Text Alignment 

<hl styl e="text-al i gn : center"> 

The style attribute defines a style for the <hl> element. The results appear in 
Figure 8.6. 



Try it yourself » 



<html> 
<body> 

<hl styl e="text-al i gn : center">Thi s is heading l</hl> 

<p>The heading above is aligned to the center of this page. 
The heading above is aligned to the center of this page. 
The heading above is aligned to the center of this page. 

</p> 

</body> 
</html> 



This is heading 1 

The beading above is aligned to die center of das page. The heading above is 
aligned to the center of this page. The heading above is aligned to the center of 
this page. 

Figure 8.6 
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Although they display similarly in the browser, the new styl e attribute makes the 
old align attribute in Figure 8.7 obsolete. 



Try it yourself » 



<html > 
<body> 

<hl a!ign="center">This is heading l</hl> 

<p>The heading above is aligned to the center of this page. 
The heading above is aligned to the center of this page. 
The heading above is aligned to the center of this page.</ 
P> 

</body> 
</htm!> 



This is heading 1 

The beading above is aligned to the center of this page. Tee heading above is 
aligned to the center of this page. The heading above is aligned to the center cf 
this page. 



Figure 8.7 



Complete Tag Reference 

The w3schools tag reference contains additional informadon about diese tags and 
their attributes. A full list of legal attributes for each HTML element is listed in the 
w3schools Complete HTML Reference online at: 

Shttp : fj www. w3schools .com/ tags/default.asp 
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In This Chapter 

□ HTML Links 

□ Open a Link in a New Browser Window 

□ Hyperlinks, Anchors, and Links 

□ HTML Link Syntax 

□ Links on the Same Page 

□ Creating a man 1 to : Link 

□ Creating an Image Link 

HTML Links 

A link is the "address" to a document (or a resource) located on the World Wide 
Web or elsewhere within your own Web server. Both types of links are shown in the 
following code example. 

<html> 
<body> 

<P> 

<a href="lastpage.htm"> 

This text</a> is a link to a page on this Web site. 

</p> 

<P> 

<a h ref="http : //www . mi crosof t . com/"> 

This text</a> is a link to a page on the World Wide Web. 

</p> 

</body> 
</html> 
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You can see in Figure 9.1 that internal and external links are displayed similarly in 
the browser. 

This text is a fink to a page on this Web site. 
This text is a Uok to a page on the World Wide Web. 
Figure 9.1 



Open a Link in a New Browser Window 

The target attribute enables you to control how the browser responds when you 
click on the link. The following example demonstrates how to link to another page 
by opening a new window so that the visitor does not have to leave your Web site. 

The results of the codes are shown in Figure 9.2. 



Try it yourself » 



<htm"l> 
<body> 

<a href="l astpage . htm" target="_bl ank">Last Page</a> 
<P> 

if you set the target attribute of a link to "_blank", 
the link will open in a new window. 

</p> 

</body> 
</html> 

Last Page 

If you set die target attribute of a link to "_blank", the link wiD open in a new 
window. 

Figure 9.2 
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Hyperlinks, Anchors, and Links 

In Web terms, a hyperlink is a reference (an address) to a resource on the Web. 
Hyperlinks can point to any resource on the Web: an HTML page, an image, a 
sound file, a movie, and so on. 

An HTML anchor is a term used to define a hyperlink destination inside a docu- 
ment. 

The anchor element <a> defines both hyperlinks and anchors. 



NOTE 



We will use the term HTML link when the <a> element points to a 
resource, and the term HTML anchor when the <a> elements defines an address 
inside a document. 



HTML Link Syntax 

The start tag contains attributes about the link. 
<a href="ur"l ">Link text</a> 

The element content (Link text) defines the part to be displayed. The element con- 
tent doesn't have to be text. You can link from an image or any other HTML ele- 
ment. 



href Attribute 

The href attribute defines the link "address". The following code will display in a 
browser as shown in Figure 9.3: 

This <a> element defines a link to w3schools: 

<a href="http://www.w3schools.com/">Visit w3schoo1s!</a> 

Visit ',v3 schools! 
Figure 9.3 
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The target Attribute 

The target attribute defines where the linked document will be opened. 
The following code example opens the document in a new browser window: 



Try it yourself » 



<htm"l> 
<body> 

<a href=http://www. w3schools.com/ target="_biank">Visit 
w3schools!</a> 

<p> 

If you set the target attribute of a link to "_biank", 
the link will open in a new window. 

</p> 

</body> 
</htm~l> 



You can use the following options for the target attribute: 



OPTION 


DESCRIPTION 


blank 


Opens the linked document in a new window 


_self 


Opens the linked document in the same frame as it was 
clicked (this is default) 


parent 


Opens the linked document in the parent frameset 


top 


Opens the linked document in the full body of the 
window 


framename 


Opens the linked document in a named frame 
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The name Attribute 

When the name attribute is used, the <a> element defines a named anchor inside 
an HTML document. Named anchors are not displayed in any special way by the 
browser because they are invisible to the reader. 

Named anchors are sometimes used to create a table of contents at the beginning of 
a large document. Each chapter within the document is given a named anchor, and 
links to each of these anchors are put at the top of the document. 

If a browser cannot find a named anchor that has been specified, it goes to the top 
of the document. No error occurs. 

Named anchor syntax: 

<a name="label ">Any content</a> 
The link syntax to a named anchor: 

<a href="#l abel ">Any content</a> 

The # in the href attribute defines a link to a named anchor. A named anchor 
inside an HTML document: 

<a name="ti ps">Useful Tips Section</a> 
A link to the "Useful Tips Section" from elsewhere in the same document: 

<a href="#tips">Jurnp to the Useful Tips Section</a> 
A link to the "Useful Tips Section" from another document: 

<a href="http://www. w3schools.com/html_tutorial . 
htm#ti ps">Jump to the Useful Tips Section</a> 



____■_! Always add a trailing slash to subfolder references. If you link like this: 
h re f="http: //www. w3 school s . com/html ",you will generate two HTTP requests 
to the server because the server will add a slash to the address and create a new request 
like this: href ="http : //www. w3school s . com/html /". 
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Links on the Same Page 

The following code example demonstrates how to use a link to jump to another 
part of a document. The results of the code are shown in Figure 9.4. 



Try it yourself » 



<html> 
<body> 



<P> 

<a href="#C4">See also Chapter 4.</a> 

</p> 

<h2>Chapter l</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 2</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 3</h2> 

<p>This chapter explains ba bla bla</p> 

<h2xa name="C4">Chapter 4</ax/h2> 
<p>This chapter explains ba bla bla</p> 

<h2>Chapter 5</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 6</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 7</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 8</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 9</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 10</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter ll</h2> 

<p>This chapter explains ba bla bla</p> 
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<h2>Chapter 12</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 13</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 14</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 15</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 16</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 17</h2> 

<p>This chapter explains ba bla bla</p> 

</body> 
</html> 



See also Chapter 4. 

Chapter 1 

This chapter explains ba bla bla 

Chapter 2 

This chapter explains ba bla bla 

Chapter 3 

This chapter explains ba bla bla 

Chapter 4 

This chapter explains ba bla bla 
Figure 9.4 
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Creating a mailto: Link 

The following example demonstrates how to link to an e-mail address and generate 
a new e-mail message in your default e-mail application (this works only if you have 
mail installed). The results of the code are shown in Figure 9.5. 



Try it yourself » 



<html> 
<body> 

<P> 

This is a mail link: 

<a href="mai 1 to : someoneOmi crosoft . com?subject=Hel 1 o%20 
agai n"> 

Send Mail</a> 

</p> 

<P> 

<t»Note:</t» Spaces between words should be replaced by %20 
to <b>ensure</b> that the browser will display your text 
properly. 

</p> 

</body> 
</html> 



This is a mail link: Send Mail 

Note: Spaces between words should be replaced by %20 to ess ore that the 
browser wiD display your text properly. 

Figure 9.5 
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The following example demonstrates a more complicated mai 1 to : link. This link 
not only generates a new e-mail, it adds a cc, bcc, a subject line, and the message 
body. The results of the code are shown in Figure 9.6. 



Try it yourself » 



<html> 
<body> 

<P> 

This is another mail to link: 

<a href="mai 1 to : someone@mi crosoft . com?cc=someoneel se@ 
mi crosof t . com&bcc=andsomeoneel se2@mi crosof t . 
com&subject=Summer%20Party&body=You%20are%20invited%20 
to%20a%20bi g%20summer%20party ! ">Send mai 1 ! </a> 

</p> 
<P> 

<b>Note : </b> Spaces between words should be replaced by %20 
to <b>ensure</b> that the browser will display your text 
properly. 

</p> 

</body> 
</html> 



This is another maito Knk: Send mail 1 

Note: Spaces between words should be replaced by %20 to ensure that the 
browser wffl display your text properly. 



Figure 9.6 
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Creating an Image Link 



The following example demonstrates how to use an image as a link. Click on the 
image to go to the linked page. The results of the code are shown in Figure 9.7. 



<p>Create a link attached to an "image: 
<a href="default . htm"> 

<img src="smi 1 ey . gi f " alt="HTML tutorial" width="32" 
height="32" /> 

</ax/p> 

<p>No border around the image, but still a link: 
<a href="default.htm"> 

<img border="0" src="smiley.gif" al t="HTML tutorial" 
width="32" height="32" /> 

</ax/p> 

</body> 
</html> 



Create a link: attached to an image: 




No border around the image, but still a link: 




You learn all about HTML images in Chapter 10, "HTML Images." 




<html> 



<body> 



Figure 9.7 
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CHAPTER 10 

HTML IMAGES 



In This Chapter 

□ img Tag and the src Attribute 

J Insert Images from Different Locations 

J Background Images 

Q Aligning Images 

Q Floating Images 

□ Adjusting Image Sizes 

□ a~l t Attribute 

□ Creating an Image Map 



img Tag and the src Attribute 

In HTML, images are defined with the <i mg> tag. 

The i mg tag is empty, which means that it contains attributes only and it has no 
closing tag. 

To display an image on a page, you need to use the src attribute, src stands for 
"source". The value of the s rc attribute is the URL of the image you want to dis- 
play on your page. 

The syntax of defining an image: 

<img src="ur7" /> 

The URL points to the location or address where the image is stored. An image file 
named "boat.gif" located in the directory "images" on "www.w3scliools.com" has 
the URL: 

http ://www.w3school s . com/images/boat .gi f 



NOTE 



It is not necessary to have administrative access to the actual image 
file to which you are linking. You can linkto any image as long as you know its URL. 
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The browser puts the image where the image tag occurs in the document. If you put 
an image tag between two paragraphs, the browser shows the first paragraph, then 
the image, and then the second paragraph. 

The following example demonstrates how to insert images to your Web page. The 
results of this code are shown in Figure 10.1. 



Try it yourself » 



<htm1 > 
<bc>cly> 

<P> 

An image: 

<img src="constr4.gi"f" width="144" height="50" /> 

</p> 

</body> 
</htm~l> 




Figure 10.1 



1 "Don't try this at homel'The images for this example reside on the 

w3schools server rather than your own, so unless you're using the Try It Yourself edi- 
tor at www.w3shools.com, you won't get the same results. If you try this exact code 
in your browser the image will be missing. 

The next section shows you how to point to images on other servers. 




56 




Chapter 1 0: HTML images 



Insert Images from Different Locations 

The example shown in Figure 10.2 demonstrates how to insert an image from 
another folder on your server or another location on the Web. 



Try it yourself » 



<htm1 > 
<body> 

<p>An image from another folds r:</p> 

<img src="/ifnages/chrome .gi f " width="33" height="32" /> 
<p>An image from v»3schools :</p> 

<i mg src="http: //www. w3 school s . com/i mages/w3schooi s_green . 
jpg" width="104" height="142" /> 

</body> 
</htm~l> 

An image from another folder 

<? 

An image from w3schools: 




Figuiu 10.2 



Image files can take time to load in the browser, so use them sparingly. 
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Background Images 

The next example demonstrates how to add a background image to an HTML 
page. The results appear in Figure 10.3. 



Try it yourself » 



<html> 

<body background="background . jpg"> 
<h3>Look: A background image!</h3> 

<p>Both gif and jpg files can be used as HTML backgrounds . </ 
P> 

<p>lf the image is smaller than the page, the image will re- 
peat itself.</p> 

</body> 
</html> 

Look: A background image! 

Both gif and jpg files can be used as HTML backgrounds. 
If die image is smaller than the page, the image will repeat itself. 
Figure 10.3 
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Aligning Images 



Figures 10.4 and 10.5 demonstrate different ways you can align images within the 
text. 



<p>The text is aligned with the image 

<img src="hackanm . gi f " al ign="bottom" width="48" height="48" 

/> 

at the bottom. </p> 

<p>The text is aligned with the image 

<img src="hackanm.gif " align="middle" width="48" height="48" 

/> 

in the middle.</p> 

<p>The text is aligned with the image 

<img src="hackanm.gif " align="top" width="48" height="48" /> 
at the top.</p> 

<pxt»Note : </b> The bottom alignment is the default !</p> 




<html> 
<body> 



</html> 
</body> 



The text is aligned with the image 



The text is aligned with the image 



The text is aligned with the image 




at the bottom. 



in the middle. 



at the top. 



Note: The bottom alignment is the default! 



Figure 10.4 
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<html> 



<body> 



<p>This image appears 

<img src="hackanm . gi f " width="48" height="48" /> 
exactly where it is placed in the code.</p> 

<pximg src="hackanm . gi f " width="48" height="48" /> 

This image appears exactly where it is placed in the code.</ 



<p>This image appears exactly where it is placed in the 
code . 

<img src="hackanm . gi f " width="48" height="48" /></p> 



P> 



</body> 
</html> 



This image appears 




exactly where it is placed in the code. 




This image appears exactly where it is placed in the code. 



This image appears exactly where it is placed in the code. 




Figure 10.5 
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Floating Images 

In the next example, you learn how to let an image float to the left or right of a 
paragraph. The results appear in figure 10.6. 



Try it yourself » 



<html> 
<body> 

<P> 

<img src="hackanm . gi f " align="left" width="48" height="48" 

/> 

A paragraph with an image. The align attribute of the image 
is set to "left". The image will float to the left of this 
text. 

</p> 
<P> 

<img src="hackanm . gi f " align="right" width="48" height="48" 

/> 

A paragraph with an image. The align attribute of the im- 
age is set to "right". The image will float to the right of 
this text. 

</p> 

</body> 
</html> 



A paragraph with an image. The align attribute of the image is set to 
"left". The image wl float to (be left of mis text. 

A paragraph with an image. The align attribute of the image is set to 
"right". The image wifl float to the right of this text. 



Figure 10.6 
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Adjusting Image Sizes 

The following example, shown in Figure 10.7, demonstrates how to display images 
in different sizes on the page. 

The wi dth and hen ght attributes allow the page to render properly and more effi- 
ciently before the image is downloaded. Without them, the page will render once, 
then re-render when each image is loaded. 

The image will be scaled to fit the stated height and width. Sometimes this can have 
a desired effect, other times it's disastrous. 



Try it yourself » 



<html> 
<body> 

<P> 

<img src="hackanm . gi f " width="20" height="20" /> 

</p> 

<P> 

<img src="hackanm . gi f " width="45" height="45" /> 

</p> 

<P> 

<img src="hackanm.gif" width="70" height="70" /> 

</p> 

<p>You can make an image smaller or larger by changing the 
values of the height and width attri butes . </p> 

</body> 
</html> 



You can make an image smaller or larger by changing the values of the "height" 
and "width" attributes. 

Figure 10.7 
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alt Attribute 

The al t attribute is used to define an alternate text for an image. The al t attribute 
tells the reader what he or she is missing on a page if the browser can't load images. 
The browser will then display the alternate text instead of the image. 

The value of the al t attribute is an author-defined text: 

<img src="boat . gi f " a~lt="Big Boat" /> 

It is a good practice to include alternate text for every image on a page to improve the 
display and usefulness of your document for people who have text-only browsers. 

The following example shows what happens when the image file is not available. 
The results are in Figure 10.8. 



Try it yourself » 



<html> 
<body> 



<P> 

An image: 

<img src=" . . /constr4 . gi f " alt="Site_Under_Construction" 
width="200" height="50" /> 

</p> 



</body> 
</html> 



An image: 



"Site Under Construction" 



Figure 10.8 



Creating an Image Map 

The following example demonstrates how to create an image map with clickable 
regions. Each of the regions is a hyperlink. The results of this example are shown 
in Figure 10.9. 

Creating a simple image link was covered in Chapter 9, "HTML Links". 
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Try it yourself » 



<htrrfl> 
<body> 

<p>C~l~ick on the sun or on one of the planets to watch "it 
closer:</p> 

<imn src="p1 anets.gif" width="145" height="126" a~lt=" Planets" 
usemap="#pl anetmap" /> 

•cmap name= ,, p1anetmap"> 

<area shape="rect" coords="0, 0 , 82 , 126" alt="Sun" href="sun. 
htm" /> 

<area shape="ci rcle" coords="90 , 58 , 3" a~lt="Mercury" 
href="mercur .htm" /> 

<area shape="ci rcle" coords="124, 58 , 8" alt="Venus" 
href="venus.htm" /> 

</map> 

</body> 
</html> 



Click on the sun or on one of the planets to watch it closer 




Figure 10.9 



Complete Tag Reference 

w3schools' rag reference conrains additional information about diese tags and their 
attributes. A full list of legal attributes for each HTML element is listed in the 
w3 schools Complete HTML Reference online at: 

^^^^ http : 1 1 www. w3schools , com / tags/ default, asp 
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HTML TABLES 



In This Chapter 

□ Creating HTML Tables 

□ Table Borders 

□ Table with No Border 

□ Headings in a Table 

□ Table with a Caption 

□ Cells Spanning Multiple Columns 

□ Tags Inside a Table 

□ Cell Padding 

□ Cell Spacing 

□ Table Background Colors and Images 

□ Cell Background Colors and Images 

□ frame Attribute 

□ Using frame and border to Control Table Borders 

Creating HTML Tables 

Tables are an excellent way to organize and display information on a page. Tables 
are defined using the <tabl e> tag. 

A table is divided into rows with the <t r> tag, and each row is divided into data 
cells using the <td> tag. The letters td stand for "table data," which is the content of 
a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal 
rules, tables, and so on. A simple HTML table appears in Figure 11.1. 
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HTML Tables 



Apples 


44 s o 


Bananas 


23% 


Oranges 


13% 


Other 


10% 



Figure 11. 1 

A basic table includes the following tags: 
►► Each table starts with a tab! e tag. 
►► Each table row starts with atr tag. 

Each table data (cell) starts with a td tag. 

Following is an example of code for a table with one row and one column. 



Try it yourself » 



<html> 
<body> 

<h4>One col umn : </h4> 
<table border="l"> 
<tr> 

<td>100</td> 
</tr> 
</table> 

</htm"l> 
</body> 
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The following code creates a table with one row and three columns. 



Try it yourself » 



<htm"l> 
<body> 

<table border="l"> 

<tr> 

<td>100</td> 
<td>200</td> 
<td>300</td> 

</tr> 

</table> 

</html> 

</body> 



The following code creates a table with two rows and three columns. 



Try it yourself » 



<htm"l> 
<body> 

<table border="l"> 

<tr> 

<td>100</td> 
<td>200</td> 
<td>300</td> 

</tr> 

<tr> 

<td>400</td> 
<td>500</td> 
<td>600</td> 

</tr> 

</tabl e> 

</body> 
</html> 
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The results of these three example tables appear in Figure 1 1 .2. 



One cohma 

[lQO.J 

The foflowing code creates a tabic tvilb ooc row nod three cohmms. 



100 



200 



300 



The following code creates a table wih two rows and three columns. 



100 



200 



300 



400 



500 



600 



Figure 11.2 



Table Borders 

The border attribute controls the appearance of the table's borders or lines. The 
default border is 0, so if you do not specify a border attribute, the table is dis- 
played without any borders. Sometimes this is useful, but most of the time, you 
want the borders to be visible. The following example demonstrates the use of dif- 
ferent table borders. The results of this example are shown in Figure 1 1.3. 



Try it yourself » 



<htm"l> 
<body> 



<h4>with a normal border :</h4> 

<table border="l"> 

<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</table> 

<h4>with a thick border:</h4> 
<table border="8"> 
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<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</tab1e> 

<h4>Wi th a very thick border :</h4> 

•ctable border="15"> 

<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<t r> 

<td>Secortd</td> 

<td>Row</td> 
</tr> 
</tab1 e> 

</body> 
</htm1> 



With 3 normal border: 



First 


Row 


Second 


Row 



With 3 thick border: 



First 


Row 


Second 


Row 



With a very thick border: 




Figure 11.3 
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Table with No Border 

If you don't provide a border attribute, the default is none. The following example 
shows two ways to create a table with no borders. Figure 11.4 displays the table as 
it appears in the browser. Figure 11.4 displays the table as it appears in the browser. 



Try it yourself » 



<html> 
<body> 

<h4>This table has no borders : </h4> 

<tabl e> 

<tr> 

<td>100</td> 

<td>200</td> 

<td>300</td> 
</tr> 
<tr> 

<td>400</td> 

<td>500</td> 

<td>600</td> 
</tr> 
</table> 

<h4>This table also has no borders : </h4> 

<table border="0"> 

<tr> 

<td>100</td> 

<td>200</td> 

<td>300</td> 
</tr> 
<tr> 

<td>400</td> 

<td>500</td> 

<td>600</td> 
</tr> 
</table> 

</body> 
</html> 
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This table has a* holders: 

100 200 300 
400 500 600 

This table also has ae borders: 

100 200 300 
400 500 600 



Figure 11. 4 



Headings in a Table 

Table headings are denned with the <th> tag. Figure 11.5 shows the table as it 
appears in the browser. 



Try it yourself » 



<htm"l> 
<body> 

<table border="l"> 
<tr> 

<th>Headi ng</th> 
<th>Another Headi ng</th> 
</tr> 
<tr> 

<td>row 1, cell l</td> 
<td>row 1, cell 2</td> 
</tr> 
<tr> 

<td>row 2, cell l</td> 
<td>row 2, cell 2</td> 
</tr> 
</table> 

<h4>Vertical headers : </h4> 

<table border="l"> 

<tr> 

<th>Fi rst Name:</th> 

(continued) 
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(continued) 

<td>Bi~n Gates</td> 
</tr> 
<tr> 

<th>Tel ephone : </th> 
<td>555 777 1854</td> 

</tr> 

<tr> 

<th>Te1 ephone : </th> 
<td>555 777 1855</td> 

</tr> 

</tab1 e> 

</body> 
</rttm~l> 



Heading 


Aooiher Heading 


row 1, cell ] 


tow 1 , eel 2 


row 2, cell 1 


row 2, cell 2 



Vertical headers: 



Firs! Name: Bi Gates 



Telephone: 555 777 185+ 



Telephone: 555 777 1855 



Figure 1 1.5 



Empty Cells in a Table 

Table cells with no content do not display veiy well in most browsers. Notice that 
the borders around the empty table cell are missing (except when using Mozilla 
Firefox) . Figure 1 1 .6 shows the table as it appears in the browser. 



Try it yourself » 



<html> 
<body> 
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<table border="l"> 

<tr> 

<td>row 1, cell l</td> 

<td>row 1, cell 2</td> 
</tr> 
<tr> 

<td>row 2, cell l</td> 

<tdx/td> 

</tr> 

</table> 

</body> 
</html> 





tow 1 , cell 1 row 1, cell 2 
row 2, cell 1 







Figure 11. 6 



To avoid this, add a nonbreaking space (&nbsp ; ) to empty data cells to ensure the 
borders are visible, as shown in Figure 1 1 .7. 



Try it yourself » 



<table border="l"> 

<tr> 

<td>row 1, cell l</td> 
<td>row 1, cell 2</td> 
</tr> 
<tr> 

<td>row 2, cell l</td> 
<td>&nbsp ; </td> 
</tr> 
</tabl e> 
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row 1, cell I 


row 1 , eel 2 


row 2, ctO I 





Figure 11.7 



P^^^^l The <thead>,<tbody>, and <tfoot> elements are seldom used, because of 
bad browser support. Expect this to change in future versions of HTML. 



Table with a Caption 

The following example demonstrates how to create a table with a caption, as shown 
in Figure 1 1.8. 



Try it yourself » 



<htm~l> 
<body> 

<h4>This table has a caption, and a thick border :</h4> 
<tabie border="6"> 
<caption>My Caption</caption> 
<tr> 

<td>100</td> 

<td>200</td> 

<td>300</td> 
</tr> 
<tr> 

<td>400</td> 

<td>500</td> 

<td>600</td> 
</tr> 
</tab1e> 

</body> 
</htm~l> 
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This table has a caption, and a thick border: 

My Caption 



100 



200 



300 



400 500 600 



Figure 11.8 



Cells Spanning Multiple Columns 

In this example, you learn how to define table cells that span more than one row or 
one column, as shown in Figure 1 1.9. 



Try it yourself » 



<html> 
<body> 



<h4>Cell that spans two col umns : </h4> 

<table border="l"> 

<tr> 

<th>Name</th> 

<th col span="2">Tel ephone</th> 
</tr> 
<tr> 

<td>Bill Gates</td> 

<td>555 77 854</td> 

<td>555 77 855</td> 
</tr> 
</tabl e> 

<h4>Cell that spans two rows:</h4> 

<table border="l"> 

<tr> 

<th>Fi rst Name:</th> 

<td>Bill Gates</td> 
</tr> 
<tr> 

<th rowspan="2">Tel ephone : </th> 
<td>555 77 854</td> 



(continued) 
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(continued) 
</tr> 
<:tr:> 

<td>55 5 77 85 5</td> 
</tr> 
</tab1e> 

</body> 
</htm~l> 



Cell that spans (wo colnmns: 







Name j Telephone 


BiD Gates 555 77 854 


555 77 855 





Cell that spans two rows: 



First Name; 


BiD Gates 


Telephone: 


555 77 854 


5<5 " R?5 



Figure 1 1.9 



Tags Inside a Table 

This example demonstrates how to display elements inside odier elements. The 
results appear in Figure 11.10. 



Try it yourself » 



<htnfl> 
<body> 

<tab1e border="l"> 
<tr> 
<td> 

<p>This is a paragraph</p> 
<p>This is another paragraph</p> 
</td> 

<td>This cell contains a table: 
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<table border="l"> 
<t r> 

<td>A</td> 
<td>B</td> 
</tr> 
<tr> 

<td>C</td> 
<td>D</td> 
</tr> 
</table> 
</td> 
</tr> 
<t r> 

<td>This cell contains a list 
<u~l> 
<~li>apples</~li> 
<1 i >bananas</1 i > 
<1 i >pi neappl es</1 i > 
</ul> 
</td> 

<td>HELLO</td> 
</tr> 
</tab1e> 

</body> 
</html> 




This cell contains a table: 



This cell contains a list 



• apples 

• bananas 

• pineapples 



HELLO 



Figure 11.10 
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Cell Padding 

This example demonstrates how to use cell padding to create more white space 
between the cell content and its borders. The results appear in Figure 11.11. 



Try it yourself » 



<htm"l> 
<body> 

<h4>Without cell paddi ng : </h4> 

<table border="l"> 

<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</table> 

<h4>with cell paddi ng : </h4> 

<table border="l" cell paddi ng="10"> 

<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</tabl e> 

</body> 
</htm"l> 
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Wrtfcoat ceflpadding: 



First 


Row 


Second 


Row 



With ceDpaddiig: 



First 


Row 


Second 


Row 



Figure 11. 1 1 



Cell Spacing 

This example demonstrates how to use cell spacing to increase the distance between 
the cells, as shown in Figure 11.12 



Try it yourself » 



<html> 
<body> 

<h4>Without eel 1 spaci ng : </h4> 

<table border="l"> 

<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</tabl e> 

<h4>with eel 1 spaci ng : </h4> 

<table border="l" eel 1 spaci ng="10"> 

<tr> 

<td>Fi rst</td> 

(continued) 
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<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 
<td>Row</td> 

</tr> 

</tab1e> 

</body> 
</html> 



Without cellspacing: 



First 


Row 


Second 


RoW: 



W ith telUpaciog: 

First |Row 
Second (Row 

Figure 11.12 



Table Background Colors and Images 

This example demonstrates how to add a background to a table, as shown in Figure 
11.13. 



Try it yourself » 



<htm~l> 
<body> 

<h4>A background co~] or : </h4> 
<tab1e border="l" bgcolor="gray"> 
<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 
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<td>Second</td> 

<td>Row</td> 
</tr> 
</tab1 e> 

<ti4>A background image : </h4> 

•ctable border="l" background="bgdesert. jpg"> 

<t r> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<t r> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</table> 

</body> 
</html> 



A background color: 




A background image: 




Figure 1 1.13 
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Cell Background Colors and Images 

The following example demonstrates how to add a background to one or more table 
cells. The result is shown in Figure 1 Ll4. 



Try it yourself » 



<html> 
<body> 

<h4>Cell backgrounds : </h4> 

<tab1e border="l"> 

<tr> 

<td bgcolor="gray">Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td background="bgdesert. jpg"> 

Second</td> 

<td>Row</td> 
</tr> 
</tab1e> 

</body> 
</htm~l> 



Cell backgrounds: 




Figure 11.14 



Aligning Cell Content 

This sample code demonstrates how to use the al i g n attribute to align the content 
of cells to create a neatly organized table. The results of the code are shown in Figure 

11.15- 



Try it yourself » 



<htm"l> 
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<body> 

<tab1e width="400" border="l"> 
<tr> 

<th al ign="left">Money spent on ... . </th> 
<th al ign="ri ght">Danuary</th> 
<th align="ri ght">February</th> 

</tr> 

<tr> 

<td align="left">Clothes</td> 
<td align="right">S241.10</td> 
<td al i gn=" ri ght"> J50. 20</td> 

</tr> 

<tr> 

<td al i gn=" 1 eft ">Make-Up</td> 

<td aligrt="right">$30.00</td> 

<td align="right">i44.45</td> 
</tr> 
<tr> 

<td align="left">Food</td> 
<td align="right">$730.40</td> 
<td align="right">$650.00</td> 

</tr> 
<tr> 

<th align="left">SuirK/tri> 
<th al i gn=" ri ght">$1001 . 50</th> 
<th al i gn="ri ght">$744 . 65</th> 
</tr> 
</table> 

</body> 
</html> 



Money spent on.... 


January 


February 


Clotbes 


$241,10 


S50.20 


Make-Up 


S30.00 


$44.45 


Food 


$730.40 


$650.00 


Sum 


S1001.50 


S744.65 



Figure 1 1.1 S 
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frame Attribute 

This example demonstrates how to use the frame attribute to control the borders 
around the table. The results of these examples appear in Figures 11.16 through 
11.18. If you see no frames around the tables in your browser, either your browser 
is too old or it does not support the attribute. 



Try it yourself » 



<htm"l> 
<body> 

<h4>with f rame="border" : </h4> 
<table f rame="border"> 
<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</tabl e> 

<h4>with f rame="box" : </h4> 
<table f rame="box"> 
<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</tabl e> 

<h4>with f rame="voi d" : </h4> 
<table f rame="voi d"> 
<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
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</tabl e> 

<html> 
<body> 



Whkframe="bordw": 


Fist Row 
: Second Row 




Whfc frame*' W: 


.First Row 
j Second Row 




Witkfcune= 


'void": 


First Row 
Second Row 





Figure 11. 16 



Try it yourself » 



<html > 
<body> 

<h4>wi th f rame="above" : </h4> 
<tab"le f rame="above"> 
<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</tabl e> 

<h4>with f rame="bel ow" : </h4> 
<table f rame="bel ow"> 
<tr> 

(continued) 

85 



Learn HTML and CSS with w3schools 



(continued) 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</table> 

<h4>With f rame="hsidss":</h4> 
•stable f rame="lisides"> 
<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</tab1e> 
</body> 
</htmT> 



With fraMe=" above": 



Fist Row 
Second Row 

With fraue=" below": 

First Row- 
Second Row 



With frame= l, lisidts": 

Fist Row 
Second Row 



Figure 1 1.17 
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Try it yourself » 



<html > 
<body> 

<h4>with f rame="vsi des" : </h4> 
<table f rame="vsi des"> 
<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</table> 

<h4>with frame="lhs":</h4> 
<table f rame="l hs"> 
<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</table> 

<h4>with f rame=" rhs" : </h4> 
<table f rame="rhs"> 
<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</tabl e> 

(continued) 
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(continued) 



</body> 
</htm~l> 


With frame= 


'vsides": 


First Row 
Second Row 




Win frame= 


Us : 


First Row 
Second Row 




With [rimc= 


•As": 


First Row 
Second Row 





Figure 11.18 



Using frame and border to Control 
Table Borders 

You can use the frame and border attributes to control the borders around the 
table. If you see no frames around the tables in these examples, pur browser does 
not support the frame attribute. 



Try it yourself » 



<html> 
<body> 

<table f rame="lisides" border="3"> 
<tr> 

<td>First row</td> 
</tr> 
</tab1e> 
<br /> 

<tab1e f rame="vsides" border="3"> 
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<tr> 

<td>Fi rst row</td> 
</tr> 
</tab1 e> 

</body> 
</htm~l> 

First row 



First row 



Figure 11,19 



Tdblc Tdos 



TAG 


DESCRIPTION 






<table> 


Defines a table 


<th> 


Defines a table header 


<tr> 


Defines a table row 


<td> 


Defines a table cell 


<caption> 


Defi nes a table caption 


<colgroup> 


Defines groups of table columns 


<col> 


Defi nes the attribute values for one or 
more columns in a table 


<thead> 


Defines a table head 


<tbody> 


Defi nes a table body 


<tfoot> 


Defi nes a table footer 
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In This Chapter 

J Unordered Lists 

□ Ordered Lists 

□ Definition Lists 

□ Nested Lists 



Unordered Lists 

HTML supports ordered, unordered, and definition lists. You can also nest one list 
within another. 

An unordered list is a list of items. The list items are marked with bullets (typically 
small black circles), as shown in Figure 12.1. 



« Tutorials 



£ - it html & ess 
|yf REFERENCES 

• HTML 4 Tag Reference 

• HTML 4 Event Reference 

• HTML 5 Tag Reference 

• HTML Color Reference 

• HTML Color Picker 

• HTML Color Mixer 

• XHTML Tag Reference 

• CSS Reference 



Figure 12.1 
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An unordered list starts with the <ul > tag. Each list item starts with the <1 i > tag. 
Figure 12.2 displays how it looks in a browser. 



Try it yourself » 



<html> 
<body> 

<h4>An Unordered List:</h4> 
<ul> 

<~H >Cof f ee</~H > 

<li>Tea</li> 

<1i>Mill«/li> 
</ul> 

</body> 
</html> 



Am Unordered List: 

• Coffee 

• Tea 

• Milk 

Figure 12.2 



Inside a list item, you can put paragraphs, line breaks, images, links, other lists, and 
so on. 

You can display different kinds of bullets in an unordered list by using the type 
attribute. Figure 12.3 shows lists marked with discs, circles, and squares. 



Try it yourself » 



<html> 
<body> 

<h4>Disc bullets list:</h4> 
<ul type="disc"> 

<li>Apples</li> 

<1 i >Bananas</l i > 

<li> Lemon s</li> 
</ul> 

(continued) 
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(continued) 
<h4>C~ircle bullets list:</h4> 
<ul type="ci rcl e"> 

<\ i>Appl es</l i > 

<\ i>Bananas</l i> 

<~l i > L em on s </l i > 
</ul> 

<h4>Square bullets list:</h4> 
<u~\ type="square"> 

<1 i>Appl es</l i > 

<1 i>Bananas</l i> 

<\ i>Lemons</l i > 
</ul> 

</body> 
</htm~l> 



Disc bullets list: 

• Apples 

• Bananas 

• Lemons 

Circle bullets listt 

o Apples 
o Bananas 
o Lemons 

Square bullets list: 

■ Apples 

■ Bananas 

■ Lemons 

Figure 12.3 
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Ordered Lists 

An ordered list is also a list of items; the list items are numbered sequentially rather 
than bulleted. 

An ordered list starts with the <ol > tag. Each list item starts with the <1 i > tag. 
Figure 12.4 shows how the ordered list appears in the browser. 



Try it yourself » 



<html> 
<body> 

<h4>An Ordered List:</h4> 
<ol> 

<1i>Coffee</l"i> 

<1i>Tea</1i> 

<"H>Milk</"li> 
</o1> 

</body> 
</html> 



Ah Ordered List: 

1. Cciee 

2. Tea 

3. MBc 

Figure 12.4 



Different Types of Ordering 

You can display different kinds of ordered lists by using the type attribute. Figure 
12.5 shows lists marked with uppercase and lowercase letters; Figure 12.6 shows 
lists with uppercase and lowercase Roman numerals. 



Try it yourself » 



<htm"l> 
<body> 

(continued) 
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(continued) 
<h4>Letters Tist:</h4> 

<ol type="A"> 

<~li>Apples</~li> 

<1 i >Bananas</l i > 

<~li>Lemons</~li> 
</o"l> 

<h4>Lowercase letters list:</h4> 
<ol type="a"> 

<li>Apples</li> 

<1 i >Bananas</l i > 

<li>Lemons</li> 
</o"l> 

</body> 
</html> 



Letters bst: 

A. Apples 
B Bananas 
C. Lemons 

Lowercase letters Est: 

a. Apples 

b. Bananas 

c. Lemons 

Figure 12.5 



Try it yourself » 



<html> 
<body> 

<h4>Roman numbers "Iist:</h4> 
<ol type="l"> 

<li>Apples</li> 

<1 i >Bananas</l i > 

<~li>Lemons</~li> 
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</ol> 

<h4> Lowercase Roman numbers ~li st :</h4> 
<o1 type=""i "> 

<~li>Apples</~li> 

<~\ i>Bananas</l i> 

<~l i > L emon s </1 i > 
</ol> 

</body> 
</htm~l> 



Roman Bombers list: 

I. Apples 
IL Bananas 
m. Lemons 

Lowercase Roman numbers list: 

L Apples 
ii_ Bananas 
in. Lemons 

Figure 12.6 



Definition Lists 

A definition list is not a list of single items. It is a list of items (terms), together with 
a description of each item (term). 

A definition list starts with a <d1 > tag (definition list). 

Each term starts with a <dt> tag (definition term). 

Each description starts with a <dd> tag (definition description). 

Figure 12.7 shows how the definition list in the following example appears in a 
browser. 
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Try it yourself » 



<html> 
<body> 

<h4>A Definition List:</h4> 
<dl> 

<dt>Coffee</dt> 

<dd>Black hot drinl«/dd> 

<dt>Mi 1 k</dt> 

<dd>white cold drink</dd> 
</d1> 

</body> 
</html> 



A Definition List: 
Coffee 

Black hot drink 

Milk 

White co!d drink 
Figure 12.7 



Inside the <dd> tag you can put paragraphs, line breaks, images, links, other lists, 
and so on. 

Nested Lists 

A nested list is a list within another list. Usually the second list is indented another 
level and the item markers will appear differently than the original list, as shown in 
Figure 12.8. 



Try it yourself » 



<htm~l> 
<body> 

<h4>A nested List:</h4> 
<ul> 

<"li>Coffee</1i> 
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<"li>Tea 
<u"l> 

<"li>Black tea</li> 
<1i>Green tea</li> 
</u~l> 
</li> 

<1i>Milk</"li> 
</u1> 

</body> 
</html> 



A Bested List: 

• Coffee 

• Tea 

o Black tea 
o Green tea 
■ Milk 

Figure 12.8 



Nested lists can be several levels deep, as shown in Figure 12.9. 



Try it yourself » 



<htm"l> 
<body> 

<h4>A nested List:</h4> 
<ul> 

<1 i >Cof f ee</"H > 

<li>Tea 
<u"l> 

<"li>Black tea</li> 
<"li>Green tea 
<ul> 

<li>Ch"ina</li> 
<1 i>Af ri ca</1 i> 
</u"l> 
</1i> 

</ u 1 > ( continued) 
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(continued) 
</~li> 

<li>MiIk</~li> 
</ul > 

</body> 
</html > 



A nested List: 

• Coffee 

• Tea 

o Black tea 
o Green tea 
■ China 
m Africa 

• M2k 
Figure 12.9 



List Tags 



TAG 


DESCRIPTION 


<ol> 


Defines an ordered list 


<ul> 


Defines an unordered list 


<li> 


Defines a list item 


<dl> 


Defines a definition list 


<dt> 


Defines a term (an item) in a defini- 
tion list 


<dd> 


Defines a description of a term in a 
definition list 


<dir> 


Deprecated. Use <ul> instead 


<menu> 


Deprecated. Use <ul> instead 
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In This Chapter 

L) Forms 

□ input Tag and Attributes 

□ acti on Attribute 
Form Examples 

Forms 

HTML forms sure used, to collect different kinds of user input. A form is an area that 
can contain form elements. 

Form elements are elements that allow the user to enter information in a form (like 
text fields, text area fields, drop-down menus, radio buttons, check boxes, and so 
on). 

A simple form example appears in Figure 13.1. 



This form sends an e-mail to w3schools. 

Name 

yourname 

Mat 

yourmail | 

Co*™""* 

| youreommcnt 

[ Send II Reset | 



Figure 13.1 
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A form is defined with the <form> tag: 
<form> 

input elements 
</form> 

input Tag and Attributes 

The most used form tag is the <input> tag. The type of input is specified with 
the type attribute. The following types are the most commonly used input types. 

Text Fields 

Text fields are used when you want the user to type letters, numbers, and so on in 
a form. The form appears as shown in Figure 13.2. Note that the form itself is not 
visible. 



Try it yourself » 



<htm~l> 
<body> 

<form action=""> 
First name: 

<input type="text" name="firstname" /> 
<br /> 
Last name: 

<input type="text" name="l astname" /> 
</form> 

</body> 
</htm"l> 



First name: 






Last name; 



Figure 13.2 
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TIP 



In most browsers,the width of the text field is 20 characters by default. 



Check Boxes 

This example demonstrates how to create check boxes on an HTML page like the 
ones shown in Figure 13.3. A user can select or deselect a check box. 



Try it yourself » 



<h~tm~l> 
<body> 



<form act"ion=""> 
I have a bike: 

<input type="checkbox" name="vehicl e" va~lue="Bi ke"> 
<br /> 

I have a car: 

<~input type="checkbox" name="vehicl e" va~l ue="Car"> 
<br /> 

I have an airplane: 

<input type="checkbox" name="vehic1 e" va~l ue="Ai rplane"> 
</form> 



</body> 
</html> 



I have a bike: d 

I have a car. D 

1 have aa airplane: O 

Figure 13.3 
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Radio Buttons 

The example demonstrated in Figure 13.4 shows how to create radio buttons on an 
HTML form. When a user clicks a radio button, that button becomes selected, and 
all other buttons in the same group become deselected. 



Try it yourself » 



<html> 
<body> 

<form action=""> 
Mai e : 

<input type=" radio" checked="checked" 
name="Sex" val ue="mal e"> 
<br> 
Femal e : 

<input type=" radio" 
name="Sex" va~l ue="femal e"> 
</form> 

</body> 
</html> 



Male: 0 
Female: O 

Figure 13.4 



Drop-Down List 

The next example shows how to create a simple drop-down list on an HTML page. 
A drop-down list is a selectable list. 



Try it yourself » 



<html> 
<body> 

<form action=""> 
<select name="cars"> 
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<opti on val ue=" vol vo">Vol vo</opti on> 
<opti on val ue="saab">Saab</opti on> 
-copti on val ue="fiat">Fi at</opti on> 
<opti on val ue="aud"i ">Audi </opti on> 
</sel ect> 
</form> 



</body> 
</html> 



EEE3H 

Volvo 



Saab 

Fiat 

Audi 



Figure 13.5 



You can also display a simple drop-down list with a value preselected on the list, as 
shown in Figure 13.6. 



Try it yourself » 



<html> 
<body> 



<form action=""> 

<select name="cars"> 

<opti on val ue=" vol vo">Vol vo</opti on> 

<opti on val ue="saab">Saab</opti on> 

<opt"ion value="fiat" sel ected="sel ected">Fi at</opti on> 
<opti on val ue="aud"i ">Audi </opti on> 
</sel ect> 
</form> 



</body> 
</html> 



I Fiat jdl 
Figure 13.6 
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Text Area 

Using a textarea (a multiline text input control) like the one in Figure 13.7, you can 
write an unlimited number of characters. A textarea can be in a form or elsewhere 
on a page. 



Try it yourself » 



<html> 
<body> 

<textarea rows="10" cols="30"> The cat was playing in the 
garden. </textarea> 



</body> 
</htm1> 

The eat was playing in the 
garden . 



Figure 13.7 



Buttons 

Buttons are common items on a form. This example demonstrates how to create a 
button. You can define your own text on the face of the button. The results of this 
code appear in Figure 13.8. 



Try it yourself » 



<htm~l> 
<body> 

<form action=""> 

<input type="button" val ue="HeTlo world!"> 
</form> 
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</body> 
</html> 



| Hello world! ] 
Figure 13.8 



Fieldset 

A fieldset is a grouping of data fields. This example demonstrates how to draw a 
border with a caption around your data, as shown in Figure 13.9. 



Try it yourself » 



<html> 
<body> 

<fieldset> 
<1 egend> 

Health information: 

</l egend> 

<form action=""> 

Height <input type="text" size="3"> 
Weight <input type="text" size="3"> 
</form> 
</fiel dset> 

<P> 

if there is no border around the input form, your browser is 
too old. 

</p> 

</body> 
</html> 



Health information: 
Height [ [ Weight 



If there is no border around the input form, your browser is too old 
Figure 13.9 
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action Attribute 

When the user clicks the Submit button, the content of the form is sent to the 
server. The form's action attribute defines the name of the file to send the con- 
tent to. The file defined in the action attribute usually does something with the 
received input. 

<form name="i nput" acti on="htm~l_form_submi t . asp" 

method="get"> 
Username : 

<input type="text" name="user" /> 
<input type="submit" val ue="Submi t" /> 
</form> 

Figure 13.10 shows how it looks in a browser. If you type some characters in the 
text field and click the Submit button, the browser sends your input to a page called 
"html_form_submit.asp". The page will show you the received input. 



Usemame | | Submrl 

Figure 13.10 



Form Examples 

This example demonstrates how to add a form to a page. The form contains two 
input fields and a Submit button. The resulting form appears in Figure 13.1 1. 



Try it yourself » 



<html> 
<body> 

<form name="i nput" action="html_form_action.asp" 
method="get"> 

Type your first name: 

<nnput type="text" name="Fi rstName" val ue="Mi ckey" size="20"> 
<br>Type your last name: 

<input type="text" name="LastName" val ue="Mouse" size="20"> 
<br> 

<input type="submit" val ue="Subm"i t"> 



106 



Chapter 1 3: HTML Forms & Input 



</form> 



<P> 

if you click the "Submit" button, you will send your input 
to a new page called html_form_action.asp. 

</p> 



</body> 
</html> 

Type your first name; Mickey 



Type your last name: Mouse 



[ Submit ] 

If you dick the "Submit" button, you wM send your input to a new page called 
hlml_form_actiorLa5p. 

Figure 13.11 



Form with Check Boxes 

The following form contains three check boxes and a Submit button. The results of 
the code appear in Figure 13.12. 



Try it yourself » 



<html> 
<body> 



<form name="input" action="html_form_action.asp" 

method="get"> 
I have a bike: 

<input type="checkbox" name="vehi cl e" value="Bike" 
checked="checked" /> 

<br /> 

I have a car: 

<input type="checkbox" name="vehi cl e" value="Car" /> 
<br /> 

I have an airplane: 

<input type="checkbox" name="vehi cl e" val ue="Ai rpl ane" /> 
<br /xbr /> 

<input type="submit" val ue="Submi t" /> 
</form> 



(continued) 
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(continued) 
<P> 

if you click the "Submit" button, you send your input to a 
new page called html_form_action.asp. 

</p> 

</body> 
</html> 



I have a bike: 0 

I have a car CI 

I hasit m MpJaae: □ 

[ Submit ] 

If yon dick the "Submit* button, you send your input to a new page called 
html_.form_actio11.a5p. 

Figure 13.12 



Form with Radio Buttons 

Figure 13.13 displays a form with two radio buttons and a Submit button. 



Try it yourself » 



<html> 
<body> 

<form name="input" action="html_form_action.asp" 

method="get"> 
Mai e : 

<input type=" radio" name="Sex" value="Male" 
checked=" checked "> 

<br> 

Femal e : 

<input type="radio" name="Sex" value=" Femal e"> 
<br> 

<input type ="submit" value ="Submit"> 
</form> 

<P> 

if you click the "Submit" button, you will send your input 
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to a new page called html_form_action.asp. 

</p> 

</body> 
</html> 



Male; © 




Female: O 




[ Submit ] 




If you dkk the "Submit* button, you will send your input to an 


ewpage called 


htnd form action-asp. 





Figure 13.13 



Send E-Mail from a Form 

The next example demonstrates how to send e-mail from a form. The results of the 
code appear in Figure 13.14. 



Try it yourself » 



<html> 
<body> 

<form action="MAlLTO: someone@w3school s . com" method="post" 
enctype="text/pl ai n"> 

<h3>This form sends an e-mail to w3School s . </h3> 
Name : <br> 

<input type="text" name="name" 
val ue="yourname" s"ize="20"> 
<br> 

Mai 1 : <br> 

<input type="text" name="mail" 
val ue="yourmai 1 " size="20"> 
<br> 

Comment : <br> 

<input type="text" name="comment" 
val ue="yourcomment" si ze="40"> 
<brxbr> 

<input type="submit" val ue="Send"> 
<input type=" reset" val ue="Reset"> 



(continued) 
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(continued) 

</form> 
</body> 
</htm1> 



This form sends an e-mail to W3Schools. 








youmame 




Mat 






yoiwmail 




otumcot, 






your comment 




Send | [ Reset | 





Figure 13,14 



Form Tags 



TAG 


DESCRIPTION 


<fcrm> 


Defines a form for user input 


<input> 


Defines an input field 


<textarea> 


Defines a textarea (a multiline text input control) 


<kbel> 


Defines a label to a control 


<fieldset> 


Defines a fieldset 


<legend> 


Defines a caption for a fieldset 


<select> 


Defines a selectable list (a drop-down box) 


<optgroup> 


Defines an option group 


<option> 


Defines an option in the drop-down box 


<button> 


Defines a pushbutton 


<isindex> 


Deprecated. Use <l nput> instead 
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HTML COLOR 



In This Chapter 

J Color Values 

□ 16 Million Different Colors 
_l Web Standard Color Names 

Ll Color Names Supported by All Browsers 

□ Web Safe Colors? 
Q Shades of Gray 

Color Values 

HTML colors are defined using a hexadecimal (hex) notation for the combination 
of Red, Green, and Blue color values (RGB). The lowest value diat can be given to 
one of the light sources is 0 (hex 00). The highest value is 255 (hex FF). 

Hex values are written as three double-digit numbers, starting with a # sign, such 
as #9ACD32. 

S Because this book is not printed in full color, it may be hard to see die 
some of the examples displayed in this chapter. You may want to consult 
the www.w3schools.com/html site to study working widi color in HTML 
more closely. 

The results of these codes are shown in Figure 14.1, 



Color Values 



COLOR 


COLOR HEX 


COLOR RGB 


Black 


#000000 


igb{0,0,0) 


Red 


#FF0000 


rgb(255,0,0) 


Green 


#00FFOO 


rgb(0,255,0) 


Blue 


#0000FF 


rgb(0,0,255) 


Yellow 


#FFFF00 


rgb(255,255,0) 


Cyan 


#00FFFF 


rgb(0,255,255) 



( continued) 
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(continued) 



Magenta 


#FFOOFF 


rgb(255,0,255) 


Gray 


#COCOCO 


rgb( 192, 192,192) 


White 


#FFFFFF 


rgb(255,255,255) 



Try it yourself » 



<htm~l> 
<body> 



<p styl e="background-color:#COCOCO"> 
Color set by using hex value 

</p> 



<p styl e="background-col or: rgb(192 , 192 , 192) "> 
Color set by using rgb value 

</p> 



<p styl e=" background-col or: gray "> 
Color set by using color name 

</p> 

</body> 
</htm~l> 



Color set by using hex value 
Color set by using rgb value 
Color set by using color 
Figure 14.1 




16 Million Different Colors 

The combination of Red, Green and Blue values from 0 to 255 gives you a total of 
more than 16 million colors to play with (256 x256 x256). Most modern monitors 
are capable of displaying at least 16,384 colors. 

If you look at the color table at http://www.w3schools.com/html/html_colors.asp, 
you will see the result of varying the red light from 0 to 255, while keeping the 
green and blue light at zero. 
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Web Standard Color Names 

The World Wide Web Consortium (W3C) has listed 16 valid color names for 
HTML and CSS: 

i> Aqua 

►> Black 

Blue 

Fuchsia 

Gray 

Green 

Lime 

Maroon 

Navy 

Olive 

Purple 

Red 
i Silver 
» Teal 
» White 

Yellow 

If you want to use other colors, you should specify their HEX values. 



Color Names Supported by All 
Browsers 

The W3C HTML and CSS standards have listed only 16 valid color names. How- 
ever, a collection of nearly 150 color names are supported by all major browsers. 

The complete list of color names supported by all major browsers is 
available on the w3schools Web site: http://www.w3schools.com/html/ 
htmlcolo rnames. asp . 




NOTE 



These addition a I names are not a part of the W3C Web standard. If you 
want valid HTML or CSS, use the HEX values instead. 
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Web Safe Colors? 

Some years ago, when computers supported a maximum of 256 different colors, a 
list of 216 "Web Safe Colors" was suggested as a Web standard, reserving 40 fixed 
system colors. This cross- browser color palette was created to ensure that all com- 
puters would display the colors correctly when running a 256-color palette. This 
is not important now, because most computers can display millions of different 
colors. 

EThe complete list of Web Safe Colors is found at http://www.w3schools. 
com/html/htmlcolors.asp. 

Shades of Gray 

Gray colors are displayed using an equal amount of power to all of the light sources. 
To make it easier for you to select the right gray color, we have compiled the follow- 
ing table of gray shades. 

You will find the same table of gray shades at http://www.w3schools.com/ 
^fc html/html_colors.asp.\ 



GRAY SHADES 


COLOR HEX 


COLOR RGB 




#000000 


rgb(0,0,0) 


#080808 


rgb(8,8,8) 




#101010 


rgb( 16, 16,16) 




#181818 


rgb(24,24,24) 




#202020 


rgb(32,32,32) 




#282828 


rgb(40,40,40) 




#303030 


rgb(48,48,48) 




#383838 


rgb(56,56,56) 




#404040 


rgb(64,64,64) 




#484848 


rgb(72, 72,72) 




#505050 


rgb(80,80,80) 




#585858 


igb(88,88,88) 




#606060 


igb(96,96,96) 




#686868 


rgb(104,104,104) 




#707070 


rgb(112,112,112) 




#787878 


rgb(120,120,120) 




#808080 


rgbfl28.128.128) 
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#888888 


rgb(136,136,136) 




#909090 


rgb(l44,l44,l44) 




#989898 


rgb(152,152,152) 




#AOA0AO 


rgb(160,160,160) 




#A8A8A8 


igb(168,168,168) 




#B0BOBO 


rgb(176,176,176) 




SB8B8B8 


rgb(184,184,184) 




#C0C0C0 


rgb(192,192,192) 




#C8C8C8 


rgb(200,200,200) 




#DODOD0 


rgb(208,208 ! 208) 




#D8D8D8 


tgb(2l6,2l6,2l6) 




frEOEOEO 


rgb(224,224,224) 




#E8E8E8 


rgb(232,232,232) 




JrFOFOFO 


rgb(240,240,240) 




*F8F8F8 


igb(248,248,248) 




#FFFFFF 


rgb(255,255,255) 
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HTML 4.01 
QUICK LIST 




The following is an HTML Quick List from the first half of this book. 

You can view or print this quick list from the w3schools Web site at www. 
w3schools.com/html/html_quick.asp 



HTML Basic Document 

<htm~l> 
<head> 

<ti t1e>D-ocument name goes here</titTe> 

</head> 

<body> 

Visible text goes here 

</body> 

</htm~l> 



Heading Elements 

<hl> Largest Heading</hl> 
<h2> . . . </h2> 
<h3> . . . </h3> 
<h4> . . . </h4> 
<h5> . . . </h5> 
<h6>Sma~nest Heading</h6> 

Text Elements 

<p>This is a paragraph</p> 

<br /> (line break) 

<hr /> (horizontal rule) 

<pre>This text is preformatted</pre> 
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Logical Styles 

<em>This text is emphasi zed</em> 
<strong>This text "is strong</strong> 
<code>This is some computer code</code> 



Physical Styles 

<t»This text is bold</b> 
<i>This text is italic</i> 



Links, Anchors, and Image Elements 

<a href="http://www. example. com/">This is a Link</a> 

<a href ="http: //www. exampl e . com/"ximg src="URL" 
al t="Al ternate Text"x/a> 

<a href="mai 1 to :webmaster@exampl e . com">Send e-mail </a> 
A named anchor: 

<a name="ti ps">Usef ul Tips Section</a> 

<a href="#ti ps">Jump to the Useful Tips Section</a> 



Unordered (Bulleted) List 

<ul> 

<li>First item</li> 
<li>Next item</li> 
</ul> 



Ordered (Numbered) List 

<ol> 

<li>First item</li> 
<li>Next item</li> 
</ol> 
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Definition List 

<dl> 

<dt>Fi rst term</dt> 
<dd>Defini ti on</dd> 
<dt>Next term</dt> 
<dd>Defini ti on</dd> 
</dl> 



Tables 

<table border="l"> 
<tr> 

<th>someheader</th> 

<th>someheader</th> 

</tr> 

<tr> 

<td>sometext</td> 

<td>sometext</td> 

</tr> 

</table> 



Frames 

<frameset col s="25%, 75%"> 
<frame src="pagel. htm"> 
<frame src="page2 . htm"> 

</f rameset> 



Forms 

<form action="http://www. example. com/test. asp" method="post/ 
get"> 

<input type="text" name="l astname" val ue="Ni xon" size="30" 

maxl ength="50"> 
<input type="password"> 

<input type="checkbox" checked="checked"> 
<input type=" radio" checked="checked"> 
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<input type="submit"> 
<input type=" reset"> 
<input type="hi dden"> 

<sel ect> 
-copti on>Appl es 

<opti on sel ected="sel ected">Appl es</opti on> 
<option sel ected>Bananas 

<opti on sel ected="sel ected">Bananas</option> 

<opti on>Cherri es 

-copti on>Cherri es</opti on> 

</sel ect> 

<textarea name="Comment" rows="60" col s="20"x/textarea> 
</form> 



Entities 

< is the same as < 
> is the same as > 
© is the same as © 



Other Elements 

<!-- This is a comment --> 
<bl ockquote> 

Text quoted from some source. 
</blockquote> 

<address> 
Address l<br> 
Address 2<br> 
Ci ty<br> 
</address> 

Source : http ://www.w3school s . com/html /html_qui ck. asp . 
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HTML/CSS 
Advanced 

□ Chapter 1 6: HTML Layout 

□ Chapter 1 7: HTML Frames 

□ Chapter 1 8: HTML Fonts 

□ Chapter 1 9: Why Use HTML 4.0? 

□ Chapter 20: HTML CSS Styles 

□ Chapter 21 : HTML Character Entities 

□ Chapter 22: HTML Head & Meta Elements 

□ Chapter 23: HTML Uniform Resource Locators 

□ Chapter 24: HTML Scripts 

□ Chapter 25: HTML Standard Attributes 

□ Chapter 26: HTML Event Attributes 

□ Chapter 27: HTML URL Encoding 

□ Chapter 28: Turn Your PC Into a Web Server 

□ Chapter 29: HTML & CSS Summary 



CHAPTER 16 



HTML LAYOUT 



In this Chapter 

□ HTML Layout Using Tables 

Everywhere on the Web, you find pages that are formatted like newspaper pages 
using HTML columns. One very common practice with HTML is to use HTML 
tables to format the layout of an HTML page. 



HTML Layout Using Tables 



A part of this page is formatted widi 
two columns, like a newspaper page. 

As you can see on this page, there is 
a left column and a right column. 

This text is displayed in the left col- 



An HTML <tabl e> is used to 
divide a part of this Web page into 
two columns. 

The trick is to use a table without 
borders, and maybe a little extra cell 
padding. 

No matter how much text you add 
to this table, it will stay inside its 
column borders. 



For more information about creating and formatting tables, see "Chapter 
11, "HTML Tables." 



Dividing a part of an HTML page into table columns is very easy to do. Just set it 
up like the following example. The results are shown in Figure 16.1 . 



Try it yourself » 



<htm~l> 
<body> 

<tab1e border="Q" wi dtlt="100%' r cell paddi ng="10"> 

<t r> 



( continued) 
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(continued) 
<td width="5096" va~lign="top"> 

This is some text. This is some text. This is some text. 
This is some text. This is some text. 

</td> 

<td width="50K" va"lign="top"> 

Another text. Another text. Another text. Another text. An- 
other text. Another text. Another text. 

</td> 



</tr> 




</tab1e> 




</body> 




</htm~l> 




This is some text. This is some text. 


Another text Another text. 


This is some text. This is some test 


Another text Another text. 


This is some test. 


Another text. Another text. 




Another text. 



Figure 16.1 
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HTML FRAMES 



In This Chapter 

□ frameset Tag 

□ frame Tag 

□ Designing with Frames 

With frames, you can display more than one HTML document in the same browser 
window. Each HTML document is called a frame, and each frame is independent 
of the others. 

The disadvantages of using frames are: 

The web developer must keep track of more HTML documents. 
It is difficult to print the entire page. 
Users often dislike them. 
► It presents linking challenges. 

►► People often use frames to wrap their own ads and branding around other 
people's content 

frameset Tag 

The <f rameset> tag defines how to divide the window into frames. Each frame- 
set defines a set of rows or columns. The values of the rows/columns indicate the 
amount of screen area each row/column will occupy. 

Vertical Frameset 

The following example demonstrates how to make a vertical frameset with three 
different documents. The results of the sample code appear in Figure 17.1 
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Try it yourself » 



<htm~l> 

<frameset col s="25%, 50%, 25%"> 
<f rame s rc="f rame_a . lttm"> 
<frame src="f rame_b. litm'V 
<frame src="f rame_c . htm"> 

</f rameset> 

</htm~l> 



Frame A 


Frame B 


Frame C 









Figure 1 7.1 



NOTE 



Note that the code does not use the <body> tag when a <f rame- 
set> tag is in use. 



Horizontal Frameset 

The following example demonstrates how to make a horizontal frameset with three 
different documents. The results of the sample code appear in Figure 17.2 
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Try it yourself » 



<html> 

<frameset rows="25%, 50%, 25%"> 
<frame src="f rame_a. htm"> 
<frame src="f rame_b. htm"> 
<frame src="frame_c.htm"> 

</f rameset> 



</html> 



Frame A 



Frame B 



Frame C 



Figure 17.2 



frame Tag 

The <f rame> tag defines which HTML document will initially open in each frame. 

In the following example, as shown in Figure 17.3, we have a frameset with two 
columns. The first column is set to 25% of the width of the browser window. The 
second column is set to 75% of the width of the browser window. The HTML 
document frame_a.htm is put into the first column, and the HTML document 
frame_b.htm is put into the second column. 
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Try it yourself » 



<frameset col s="25%, 75%"> 
<frame src="f rame_a. htm"> 
< frame src="f rame_b. htm"> 

</f rameset> 



Frame A 



Frame B 



Figure 1 7.3 



NOTE 



The frameset column size value can also be set in pixels 
(cols="2QQ, 500"), and one of the columns can be set to use the remaining 
space Ccols="25%,*"). 



Designing with Frames 

If a frame lias visible borders, the user can resize ir by dragging the border. To pre- 
venta user from doing this, you can add noresize="rtoresi ze" to the <f ranie> 
tag. 



noframesTag 

Although they are less common these days, it's a good idea to add die <nof rames> 
tag for older or text-based browsers diat do not support frames. 
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You cannot use the <body> tags together with the <f rameset> tags. However, if 
you add a <nof rames> tag containing some text for browsers that do not support 
frames, you will have to enclose the text in <body> tags. See how it is done in the 
following example. The results of this code appear in Figure 17.4. 



Try it yourself » 



<htm~l> 

<frameset col s="25%, 50%, 25%"> 
<frame src="f rame_a. htm"> 
<frame src="frame_b.htm"> 
<frame src="f rame_c . htm"> 

<nof rames> 

<body>Your browser does not handle frames ! </body> 
</nof rames> 

</f rameset> 

</html> 



(This browser supports frames, so the noframes text remains invisible." 




Figure 17.4 
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Mixed Frameset 

The following example demonstrates how to make a frameset with three documents 
and how to mix them in rows and columns, as shown in Figure 17-5. 



Try it yourself » 



<htm"l> 

<frameset rows="50%, 50%"> 

<frame src="f rame_a. htm"> 

<frameset col s="25%, 75%"> 
<frame src="f rame_b . htm"> 
<frame src="f rame_c . htm"> 
</f rameset> 



</f rameset> 
</html> 



Frame A 


Frame B 


Frame C 



Figure 17.5 
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noresize Attribute 

This example demonstrates the noresize attribute. The frames are not resizable. 
Unlike other frames, if you move the mouse over the borders between the frames, 
you will notice that you cannot drag or move the frame borders. 



Try it yourself » 



<htm~l> 

<frameset rows="50%, 50%"> 

<frame noresi ze="noresi ze" src="f rame_a. htm"> 
<frameset col s="25%, 75%"> 

<frame noresi ze="noresi ze" src="f rame_b . htm"> 

<frame noresi ze="noresi ze" src="f rame_c . htm"> 

</f rameset> 

</html> 



Navigation Frame 

This example demonstrates how to make a navigation frame. A navigation frame 
contains a list of links with the second frame as the target. The second frame will 
show the linked document. A sample navigation frame appears in Figure 17.6. 



Try it yourself » 



<htm"l> 

<frameset col s="120 , *"> 

<f rame src="tryhtm"l_contents . htm"> 

<frame src="f rame_a. htm" name="showf rame"> 

</f rameset> 

</html> 
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Frame a 
Frame b 
Frame c 



Frame A 



Figure 17.6 



In the first column, the file called tryhtml_contents.htm contains links to three 
documents on the w3schools.com Web site. The source code for the links: 

<a href ="f rame_a. htm" target ="showf rame">Frame a</axbr> 
<a href ="f rame_b . htm" target ="showf rame">Frame b</axbr> 
<a href ="f rame_c . htm" target ="showf rame">Frame c</a> 



Inline Frame 

Frames can also be used within a single HTML page. These are known as inline 
frames. The following example demonstrates how to create an inline frame like the 
one that appears in Figure 17.7. 



Try it yourself » 



<htm~l> 
<body> 

<i frame src="defaul t . asp"x/i f rame> 

<p>Some older browsers don't support i frames . </p> 
<p>lf they don't, the i frame will not be vi si bl e . </p> 
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Lu35chools.com 



HOME HTML CSS XHL JAVASCRIPT 



BES1 WES HOSTING 




com 



> 



Some older browsers don't support (frames 
If they don't, die iframe wiD not be visible. 
Figure 17.7 



Jump to 

This example demonstrates two frames. One of the frames has a source to a speci- 
fied section in a file. The specified section is made with <a name="ClO"> in the 
link.htm file. The result is shown in Figure 17.8. 



Try it yourself » 



<htm"l> 



<frameset col s="20%, 80%"> 
<frame src="f rame_a. htm"> 
<frame src="l i nk. htm#ClO"> 

</f rameset> 



</html> 
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Frame A 


V NttpiCI 1U 






1ms chapter explains ba bla bla 






PliQntar 1 1 






1 ms chapter explains ba bla bla 






i.napter xl 






This chapter explains ba bla bla 






Chapter 13 






This chapter explains ba bla bla 






Chapter 14 











Figure 17.8 



Jump to a Specified Section 

This example demonstrates two frames. The navigation frame (content.htm) to the 
left contains a list of links with the second frame (link.htm) as a target on the right. 
The second frame shows the linked document. The result is shown in Figure 17.9. 



Try it yourself » 



<htm"l> 



<frameset col s="180 , *"> 

<frame src="content . htm"> 

<frame src="l i nk . htm" name="showf rame"> 

</f rameset> 

</html> 



134 



Chapter 17; HTML Frames 



Link- without Anchor 


Chapter 1 




Link with Anchor 






This chapter explains ba bla bta 




Chapter 2 






This chapter explains ba bla bla 






Chapter 3 






This chapter explains ba bla bla 






Chapter 4 






This chapter explains ba bla bla 






Chapter 5 





Figure 1 7.9 



One of the links in the navigation frame is linked to a specified section in the target 
file. The HTML code in the file content.htm looks like this: 

<a href =""1 i nk . htm" target ="showf rame">l_i nk without Anchors/ 
axbrxa href ="~l i nk.htm#C10" target ="showf rame">Li nk 
with Anchor</a>. 



Frame Tags 



TAG 


DESCRIPTION 


<fiameset> 


Defines a set of frames 


<frame> 


Defines a sub window (a frame) 


<noframes> 


Defines a noframe section for browsers that do not handle 
frames 


<ifranie> 


Defines an inline sub window (frame) 
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HTML FONTS 



In This Chapter 

□ font Tag 

□ font Attributes 

_l Controlling Fonts with Styles 



The <f ont> tag in HTML is deprecated. It is supposed to be removed 
in a future version of HTML. Even if a lot of people are using it, you should try to avoid 
it and use styles instead. The tag is explained here to help you understand it if you 
see it used elsewhere on theWeb. 



font Tag 

With HTML code like the following example, you can specify both the size and the 
type of the browser output. You can see what the results look like in Figure 18.1. 



Try it yourself » 



<p> 

<font size="2" face="Verdana"> 

This is a paragraph. 

</font> 

</p> 

<P> 

<font size="3" face="Times"> 
This is another paragraph. 

</font> 

</p> 

This is a paragraph. 

This is another paragraph 
Figure 18.1 
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Font Attributes 



A TTn TT>T T' 1 1 1 1 

ATTRIBUTE 


EXAMPLE 


TIT TTTTT/ Ti |' 

PURPOSE 


slze= number" 


slze= 2 


LJennes tne ront size 


size="+number" 


size="+l" 


Increases the font size 


size="-number" 


■I i ii 

slze= -1 


Decreases the font size 


face= " face- name " 


face=" Times" 


Defines the font name 


color="color-value" 


color="#eefft)0" 


Defines the font color 


color="color-name" 


color="red" 


Defines the font color 



Controlling Fonts with Styles 

Although it's explained here, the <f ont> tag should not be used! The <f ont> tag 
is deprecated in the latest versions of HTMLj which you learn more about in the 
next chapter. 

The World Wide Web Consortium (W3C), an organization that creates and sets 
standards for the Web, has removed the <f ont> tag from its recommendations. In 
future versions of HTML, style sheets (CSS) will be used to define the layout and 
display properties of HTML elements. 

Font 

This example demonstrates how to set the font of a text, as shown in Figure 18.2. 



Try it yourself » 



<htrri"l> 
<body> 

<hl styl e="font-fami1y: verdana">A heading</hl> 
<p style="font-fam"ily:cour"ier">A paragraph</p> 
</body> 
</htm~l> 



A heading 

A paragraph 
Figure 1 8.2 
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Font Size 

This example demonstrates how to set the font size of a text, as shown in Figure 
18.3. 



Try it yourself » 



<htm"l> 
<body> 

<hl style="font-size:150%">A headi ng</hl> 
<p styl e="font-si ze : 80%">A paragraph</p> 
</body> 
</html> 



A heading 

A paragraph 
Figure 18.3 



Font Color 

This example demonstrates how to set the color of a text, as shown in Figure 18.4. 



Try it yourself » 



<html> 
<body> 

<hl style="co~lor:b"lue">A blue headi ng</hl> 
<p style="color: red">A red paragraph</p> 
</body> 
</html> 



A blue heading 

A Ted paragraph 
Figure 18.4 
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The colors described in the code samples in this chapter are shown in grayscale in 
the figures. To see the full-color sample results, go to: 

•tr 

http :/ / www. w3schools. com/h tml/h tmlfo nts .asp 



Font, Font Size, and Font Color 

This example demonstrates how to set the font, font size, and font color of a text at 
the same time, as shown in Figure 18.5- 



Try it yourself » 



<htm"l> 
<body> 

<p styl e="f ont-f ami ly: verdana; font-size: 80%; color : green "> 

This is a paragraph with some green text in it. This is a 
paragraph with some green text in it. This is a paragraph 
with some green text in. it. This is a paragraph with some 
green text in it. 

</p> 
</ body> 
</htm~l> 



This is a paragraph with some green text in it, This b a paragraph with 
some green text in it. This is a paragraph with some green text in it. 
This is a paragraph with some green text in it. 

Figure 1 8.S 



More About Style Sheets 

The remaining chapters in this book focus on working with styles. In die 
I I » . following chapters, we will explain why some tags, like <f ont>, are to be 
^ removed from the HTML recommendations, and how to insert a style 

sheet in an HTML document. 

ETo learn more about style sheets, check out Leam CSS urith uSscbools, 
also from Wiley Publishing and try the CSS Tutorial at w3schools.com. 
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WHY USE HTML 4.0? 



In This Chapter 

□ HTML 3.2 Was Very Wrong! 

□ Enter HTML 4.0 

HTML 3.2 Was Very Wrong! 

The original HTML was never intended to contain tags for formatting a document. 
HTML tags were intended to define the content of the document like: 

<p>This is a paragraph</p> 
<hl>This is a headi ng</hl> 

When tags like <font> and color attributes were added to the HTML 3.2 spec- 
ification, it started a nightmare for Web developers. Development of large Web 
sites where fonts and color information had to be added to every single Web page, 
became a long, expensive, and unduly painful process. 

Enter HTML 4.0 

In HTML 4.0, all formatting can be removed from the HTML document and 
stored in a separate style sheet. Because HTML 4.0 separates the presentation from 
the document structure, you finally get what you always needed: total control of 
presentation layout without messing up the document content. 

What Should You Do About It? 

►► Do not use presentation attributes inside your HTML tags if you can avoid 
it. Start using styles! Please read Learn CSS with w3schools to learn more about 
working with style sheets. 

►► Do not use deprecated tags. Visit the w3schools HTML 4.01 Reference to see 
which tags and attributes are deprecated: 
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http : / / www. w3 schools .com/html/htmlreference. asp 



NOTE 



The official HTML 4.01 recommends the use of lowercase tags. 



Validate Your HTML Files as HTML 4.01 

An HTML document is validated against a Document Type Definition (DTD). 
Before an HTML file can be properly validated, a correct DTD must be added as 
the first line of the file. 

The HTML 4,01 Strict DTD includes elements and attributes that have not been 
deprecated or do not appear in framesets: 

<!DOCTYPE HTML PUBLIC 

"-//W3C//DTD HTML 4.01//EN" 

" http : //www. w3 . o rg/TR/h trrfl 4/st ri ct . dtd "> 

The HTML 4.01 Transitional DTD includes everything in the strict DTD plus 
deprecated elements and attributes: 

< ! DOCTYPE HTML PUBLIC 

"-//W3C//DTD HTML 4.01 TransitionaV/EN" 
" http : //www. w3 . o rg/TR/h trrfl 4/1 oose . dtd"> 

The HTML 4.01 Frameset DTD includes everything in the transitional DTD plus 
frames as well: 

<! DOCTYPE HTML PUBLIC 

"-//W3C//DTD HTML 4.01 Frameset//EN" 

" http : //www . w3 . o rg/TR/h t ml 4/f rameset . dtd " > 

Test Your HTML With the W3C Validator 

If you want to check the markup validity of Web documents in HTML, input your 
page address (such as www.w3schools.com) in the box at the Markup Validation 
Service. The Validator is maintained by the W3C. 

http :/ / validator. w3 - org/ 
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In This Chapter 

□ Styles in HTML 

□ How to Use Styles 

□ Style Tags 

Styles in HTML 

With HTML 4.0, all formatting can be moved out of the HTML document and 
into a separate style sheet. This makes creating, updating, and maintaining the Web 
site much easier. 

The following example demonstrates how to format an HTML document with 
style information added to the <head> section. The results of the sample code 
appear in Figure 20.1. 



Try it yourself » 



<html> 
<head> 

<style type="text/css"> 
hi {color: red} 
h3 {color: blue} 

</style> 

</head> 
<body> 

<hl>This is header l</hl> 
<h3>This is header 3</h3> 
</body> 

</html> 
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This is header 1 

This is header 3 



Figure 20.1 



Nonunderlined Link 

Links are underlined by default in the browser page. The following example dem- 
onstrates how to display a link that is not underlined by default, using a styl e 
attribute. The results of the sample code appear in Figure 20.2. 



Try it yourself » 



<htm"l> 
<body> 

<a href="l astpage . htm" 

styl e=" text-decoration : none"> 

THIS IS A LINK! 

</a> 

</body> 
</html> 



THIS IS A LINK! 
Figure 20.2 
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Link to an External Style Sheet 

This example demonstrates how to use the <1 i nk> tag to link to an external style 
sheet. The results of the sample code appear in Figure 20.3. 



Try it yourself » 



<htm"l> 
<head> 

<link re1="styl esheet" type="text/css" href="sty1es.css" > 
</bead> 

<body> 

<hl>I am formatted with a linked style sheet</hl> 

<p>Me too!</p> 

</body> 

</html> 



I am formatted with a linked style 
sheet 

Me too! 



Figure 20.3 



EThe linked style sheets in the sample codes in this chapter are located on 
the w3schools.com server, so the sample code works best if you use die 
Try It Yourself editor. Go to http://www.w3schools.com/html and click 
Try it yourself. 

How to Use Styles 

When a browser reads a style sheet, it formats the document according to the 
instructions in the sheet. There are three types of style sheets: external, internal, 
and inline. 
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External Style Sheet 

An external style sheet is ideal when the style is applied to many pages. With an 
external style sheet, you can change the look of an entire Web site by changing one 
file. Each page must link to the style sheet using the <1 i nk> tag. The <1 i nk> tag 
goes inside the <head> section. 

<head> 

<"link rel="styl esheet" type="text/css" href="mystyle.css"> 
</head> 

Internal Style Sheet 

An internal style sheet should be used when a single document has a unique style. 
You define internal styles in the <head> section with the <styl e> tag. The results 
of the sample code appear in Figure 20.4. 



Try it yourself » 



<head> 

<style type="text/css"> 

body {background-color: gray} 

p {margin-left: 20px} 

</styl e> 

</head> 

<p>The left margin is indented 20 pixels.</p> 



The left margin is indented 20 pixels. 




Figure 20.4 
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Inline Styles 

An inline style should be used when a unique style is to be applied to a single occur- 
rence of an element. To use inline styles, you use the styl e attribute in the relevant 
tag. The styl e attribute can contain any CSS property 

The example shown in Figure 20.5 demonstrates how to change the background 
color and the left margin of a paragraph. 



Try it yourself » 



<p styl e="co~lor: red; margin-left: 20px"> 

This is a paragraph. It's colored red and indented 20px. 

</p> 



This is a paragraph. It's colored red and indented 20pi. 
Figure 20.5 



Read Learn CSS with w3schoo!s to learn more about working with 

style sheets. 



Style Tags 



TAG 


DESCRIPTION 


<style> 


Defines a style definition 


<link> 


Defines a resource reference 


<div> 


Defines a section in a document 


<span> 


Defines a section in a document 


<fbnr> 


Deprecated. Use styles instead 


<basefont> 


Deprecated. Use styles instead 


<center> 


Deprecated. Use styles instead 
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In This Chapter 

□ Character Entities 

□ Nonbreaking Space 

□ Commonly Used Character Entities 



Character Entities 

Some characters are reserved in HTML. For example, you cannot use the greater 
than or less than signs within your text because the browser could mistake them 
for markup. If you want the browser to actually display these characters, you must 
insert character entities in the HTML source. 

A character entity looks like this: &enti ty_name ; or &#enti ty_number ; 
To display a less than sign, you must write: &1 1 ; or &#60 ; 

The advantage of using an entity name instead of a number is that the name often 
is easier to remember. However, the disadvantage is that browsers may not support 
all entity names (while the support for entity numbers is very good) . 

The following example lets you experiment with character entities. The results of 
the code appear in Figure 21.1. 



Try it yourself » 



<html> 
<body> 



<hl>Character Entities</hl> 

<p>Code: &X;</p> 

<P> 



(continued) 
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(continued) 

Substitute the "X" with an entity number like "#174" or an 
entity name like "pound" to see the result. Use the table 
in the next section to try different character entities. 

</p> 

<p>&cent ;</p> 
<p>®</p> 
<p>&anp; </p> 
</body> 
</htm~l> 



Character Entities 

Code:&X: 

Substitute the "X" with an entity number like ™#1 74" or an entity name like 
"pound" to see the resuft. Use the table in the next section to try different 
character entities. 

i 

t 
& 

Figure 21.1 



Nonbreaking Space 

The most common character entity in HTML is the nonbreaking space. 

Normally, HTML truncates spaces in your text. If you write 10 spaces in your text, 
HTML will remove 9 of them. To add. lots of spaces to your text, use the Snbsp; 
character entity. 
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Commonly Used Character Entities 



[ 



NOTE 



Entity names are case sensitive! 



RESULT 


DESCRIPTION 


ENTITY NAME 


ENTITY NUMBER 




nonbreaking space 


  


  


< 


less than 


Mr, 


< 


> 


greater than 


> 


> 




ampersand 


& 


& 


i 


cent 


¢ 


¢ 


£ 


pound 


£ 


£ 


¥ 


yen 


¥ 


¥ 


€ 


euro 


€ 


€ 




section 


§ 


§ 




copyright 


Sicopy; 


© 


® 


registered 
trademark 


® 


® 



For a complete reference of all character enriries, visit the w3schools HTML Enri- 
ties Reference; 




http : // www. w3schools .com/ tags/refenriues. asp 
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HTML HEAD AND 
META ELEMENTS 



In This Chapter 

□ Head Element 

□ Meta Element 

Head Element 

The head element <head> contains general information, also called meta- 
information, about a document. Meta means "information about". You can say that 
meta-data means information about data, or meta-information means information 
about information. The head element includes important information such as the 
document's title, style instructions, and more. 



What's Inside the Head Element? 

According to the HTML standard, only a few tags are legal inside the head section. 
The legal tags include the following: 

<base> 

<title> 

<meta> 

<~link> 

<styl e> 

<scri pt> 

You learned more about the <"link> and <style> tags in Chapter 20, 
"HTML CSS Styles." 

The elements inside the <head> element are not intended to be displayed by a 
browser. Look at the following illegal construct: 
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Try it yourself » 



<head> 

<p>This is some text</p> 
</head> 

In this example, the browser has two options: 

Display the text because it is inside a <p> element. 

Hide the text because it is inside a <head> element. 

As Figure 22. 1 demonstrates, if you put an HTML element like <hl> or <p> inside 
a head element like this, most browsers will display it, even if it is illegal. 

This is some text 
Figure 22.1 

Should browsers forgive you for errors like this? We don't think so. Others do. 

title Tag 

The document's title information inside a head element is not displayed in the 
browser window, but is used for indexing and cataloging. The result of the follow- 
ing code is shown in Figure 22.2. 



Try it yourself » 



<htm"l> 
<head> 

<title>The document title is hi dden</ti tl e> 
</head> 

<body> 

<p>This text is di spl ayed</p> 
</body> 

</html> 

This text is displayed 
Figure 22.2 
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base Tag 

The example illustrated in Figure 22.3 demonstrates how to use the <base> tag to 
let all the links on a page open in a new window. 



Try it yourself » 



<html> 
<head> 

<base target="_bl ank"> 
</head> 

<body> 
<P> 

<a href=" http://www.w3 school s .com" 
target="_bl ank">Thi s link</a> 

will load "in a new window because the target attribute is 
set to "_blank". 

</p> 
<P> 

<a href=" http://www.w3 school s .com"> 
This link</a> 

will also load in a new window even without a target attri- 
bute . 

</p> 

</body> 
</html> 



This link will load in a new window because the target attribute is set to 
"_blank". 

This liak will also load in a sew window even without a target attribute. 
Figure 22.3 
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Head Tags 


TAG 


DESCRIPTION 


<head> 


Defines information about the document 


<ritle> 


Defines the document title 


<base> 


Defines a base URL for all the links on a page 


<link> 


Defines a resource reference 


<meta> 


Defines meta information 


<!DOCTYPE> 


Defines the document type and tells the browser which 
version of the markup language the page is written in. 
This tag goes before the <html> start tag. 



A full list of legal attributes for each element is listed in the w3schools Complete 
HTML Reference online at: 

^^2C http://www.w3schools.com/tags 



Meta Element 

As discussed earlier in the last section, the head element contains general informa- 
tion (meta-information) about a document. 

HTML also includes a meta element <meta> that goes inside the head element. 
The purpose of the meta element is to provide meta-information about the docu- 
ment. Most often the meta element is used to provide information that is relevant 
to browsers or search engines, like describing the content of your document. 

The meta attributes in the following example identify the document's author, edi- 
tor, and the software used to create the page. 

<htm~l> 
<head> 

<meta name="author" 
contsnt="]an Egil Refsnes"> 

<meta name="revi sed" 

content="Mi chael Woodward , 3/14/2010"> 

<meta name="generator" , . ,. 

(continued) 
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(continued) 

content="Mi crosoft FrontPage 5.0"> 

</head> 

</html> 

You can see a complete list of the meta element attributes in the w3schools.com 
HTML 4.01 Tag Reference: 

^^^^ http://www.w3schools.com/html/html_reference.asp 

Keywords for Search Engines 

Information inside a meta element can also describe the document's keywords, 
which are used by search engines to find your page when a user conducts a search 
on the keyword. 



Try it yourself » 



<htm"l> 
<head> 

<meta name="description" 
content="HTML examples"> 

<meta name="keywords" 

content="HTML, DHTML, CSS, XML, JavaScript, VBScript"> 

</head> 

<body> 
<P> 

The meta attributes of this document describe the document 
and its keywords. 

</p> 
</body> 

</html> 
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The intention of the name and content attributes is to describe the content of a 
page, such as: 

<meta name="description" content="Free Web tutorials on 
HTML, CSS, XML, and SML" /> 

<meta riame=" keywords" content="HTML, DHTML, CSS, XML, 
JavaScript" /> 

Some search engines on the Web will use the <name> and <content> attributes 
of the meta tag to index your pages. However because too many Webmasters have 
used meta tags for spamming, like repeating keywords to give pages a higher search 
ranking, some search engines have stopped using them entirely. 

You can read more about search engines in the w3schools.com Web Building Tuto- 
rial at: 

http :// www. w3 schools.com/site/ 

Unknown Meta Attributes 

Sometimes you will see meta attributes that are unknown to you, such as: 

<meta name=" security" content="low" /> 

Then you just have to accept that this is something unique to the site or to the 
author of the site, and that it has probably no relevance to you. 

Redirect a User 

This example demonstrates how to redirect a user if your site address has changed. 



Try it yourself » 



<htnn~l> 
<head> 

<meta http-equi v="Ref resh" 

content=" 5 ; ur1=http: //www .w3schooi s . com"> 

</head> 

<body> 

<P> 

Sorry! We have moved! The new URL is: <a href="http: //www. 
w3 school s . com">http: //www.w3school s. com</a> 

</p> 

(continued) 
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(continued) 
<P> 

You will be redirected to the new address in five seconds. 
</p> 

<p> 

If you see this message for more than 5 seconds, please 
click on the link above! 

</p> 

</body> 
</htm~l> 



The W3 Consortium states that "Some user agents support 
the use of META to refresh the current page after a specified number of sec- 
onds, with the option of replacing it by a different URL. Authors should not 
use this technique to forward users to different pages, as this makes the page 
inaccessible to some users, Instead, automatic page forwarding should be 
done using server-side redirects." For more information, visit the W3 Web site: 

http :// www. w3 . org/TR/html4/struct/global. html#adef-http-equi v 
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HTML UNIFORM 
RESOURCE 
LOCATORS 



In This Chapter 

□ Uniform Resource Locator (URL) 

□ URL Schemes 

□ Using Links 

Uniform Resource Locator (URL) 

Something called a uniform resource locator (URL) is used to address a document 
(or other data) on the World Wide Web. When you click on a link in an HTML 
document, an underlying <a> tag points to a place (an address) on the Web with an 
href attribute value like this: 

<a href="lastpage.htm">Last Page</a> 

The lastpage.htm link in the example is a link that is relative to the Web site that 
you are browsing, and your browser will construct a full Web address to access the 
page, such as: 

http : //www. w3 school s . com/html /I astpage . htm 

A full Web address follows these syntax rules: 

scheme : //host . domai n : port/path/fil ename 

The scheme is defining the type of Internet service. The most common type is 
http. 

The domain is defining the Internet domain name like w3schools.com. 

The host is defining the domain host. If omitted, the default host for http is 
www. 

The :port is defining the port number at the host. The port number is nor- 
mally omitted. The default port number for http is 80. 
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►► The path is defining a path (a subdirectory) at the server. If the path is omitted, 
the resource (the document) must be located at the root directory of the Web 
site. 

The filename is defining the name of a document. The default filename might 
be default.asp, index.html, or something else depending on the settings of the 
Web server. 

URL Schemes 



Some examples of the most common schemes can be found in the following table: 



SCHEMES 


ACCESS 


file 


a file on your local PC 


ftp 


a file on an FTP server 


http 


a file on a World Wide Web Server 


gopher 


a file on a Gopher server 


news 


a Usenet newsgroup 


telnet 


a Telnet connection 


was 


a file on a WAIS server 



Accessing a Newsgroup 

The following HTML code: 

<a href="news: alt. html ">HTML Newsgroup</a> 
creates a link to a newsgroup. 



Downloading with FTP 

The following HTML code: 

<a href =" f tp : //www. w3schooI s . com/f tp/wi nzi p. exe">Down~load 
Wi nZi p</a> 

creates a link to an FTP directory. (The link doesn't work. Don't try it. It's just an 
example. w3schools doesn't really have an PTP directory.) 

Link to your Mail system 

The following HTML code: 

<a href="mai ~lto: someone@w3schooIs . com">someone®w3school s . 
com</a> 

creates a link that opens a new e-mail message addressed to the address in the link 
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Using Links 

The following sample code shows how to use the three types of URL links described. 
Results of the code appear in Figure 23.1. 



Try it yourself » 



<htm"l> 
<body> 

<pxa href="news : al t . html ">HTML Newsgroup</ax/p> 

<pxa href="ftp : //www. w3 school s . com/ft p/wi nzi p . exe">Downl oad 
wi nzi p</ax/p> 

<pxa h ref="mai 1 to : someone@w3school s . com">someone@w3school s . 
com</ax/p> 

</body> 

</html> 

HTML NewigrcHgi 
Download WiaZb 

5oroeone(3w3schoob.com 
Figure 23.1 
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In This Chapter 

G Insert a Script into a Page 

□ How to Handle Older Browsers 

□ noscri pt Tag 
J Script Tags 

Insert a Script into a Page 

Add scripts to HTML pages to make them more dynamic and interactive. A script 
in HTML is defined with the <seri pt> tag. 

This example demonstrates how to insert a script into your HTML document. 
Note that yon will have to use the type attribute to specify the scripting language. 
The following script produces the output shown in Figure 24. 1. 



Try it yourself » 



<htm1 > 
<body> 

<script type="text/javascri pt"> 
document .wri teC'Hello World ! ") 
</scri pt> 

</body> 
</htmT> 



Hello World! 
Figure 24.1 



To learn more about scripting in HTML, read w3schools' JavaScript tutorial at: 

Ehttp:/ / www.w3schools.com/js/ 
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How to Handle Older Browsers 

A browser that does not recognize the <sc ri pt> tag at all will display the <sc ri pt> 
tag's content as text on the page. To prevent the browser from doing this, you 
should hide the script in comment tags. An old browser (that does not recognize the 
<scri pt> tag) will ignore the comment, and it will not write the tag's content on 
the page. On the other hand, a new browser will understand that the script should 
be executed, even if it is surrounded by comment tags. 

JavaScri pt : 

<scri pt type="text/javascri pt"> 
<!- 

document. write("Hello World! ") 

//--> 

</scri pt> 

VBScript: 

<script type="text/vbscri pt"> 
<!- 

document .wri te("Hell o World!") 
'--> 

</scri pt> 

The following example demonstrates how to prevent browsers that do not support 
scripting from displaying text unintentionally. The results appear in Figure 24.2. 



Try it yourself » 



<html> 
<body> 

<scri pt type="text/javascr"i pt"> 
<! — 

document .wri te("lf this is displayed, your browser supports 
scri pti ng ! ") 

//--> 
</script> 

<noscript>No JavaScript support ! </noscri pt> 

</body> 
</html> 



If this is displayed, yens browser supports scripting! 
Figure 24.2 
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noscnpt Tag 

In addition to hiding the script inside a comment, you can also add a <noscri pt> 
tag. 

The <nosc ri pt> tag is used to define an alternate text if a script is NOT executed. 
This tag is used for browsers that recognize the <scri pt> tag, but do not support 
the script inside, so these browsers will display the text inside the <noscri pt> tag 
instead. However, if a browser supports the script inside the <scri pt> tag it will 
ignore the -cnoscri pt> tag. 

JavaScript: 

<scri pt type="text/javasc ri pt"> 
<! — 

document .wri teC'Hei 1 o World ! ") 

//--> 
</scri pt> 

<noscri pt>Your browser does not support JavaScript!*;/ 
noscri pt> 

VBScript: 

<script type="text/vbscript"> 

<!- 

document .wri teC'Hei 1 o World ! ") 

'--> 

</scri pt> 

<noscri pt>Your browser does not support VBScri pt ! </noscri pt> 

Script Tags 



TAG 


DESCRIPTION 


<script> 


Defines a script 


<noscript> 


Defines an alternate text if the script is not executed 


<object> 


Defines an embedded object 


<param> 


Defines runtime settings (parameters) for an object 


<applet> 


Deprecated. Use <object> instead 
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HTML STANDARD 
ATTRIBUTES 



In This Chapter 

□ Core Attributes 

—I Language Attributes 

□ Keyboard Attributes 

HTML tags can have attributes. The special attributes for each tag are listed under 
each tag description. The attributes listed here are the core and language attributes 
that are standard for all tags (with a few exceptions). 

Core Attributes 



Not valid in base, head, html, meta, param, script, style, and title ele- 
ments. 



ATTRIBUTE 


VALUE 


DESCRIPTION 


class 


classruie or style _rule 


The class of die element 


id 


idname 


A unique id for die element 


style 


style definition 


An inline style definition 


title 


tooltip_text 


A text to display in a tool rip 



Language Attributes 

Not valid in base, br, frame, frameset, fir, if rame, param, and script ele- 
ments. 



ATTRIBUTE 


VALUE 


DESCRIPTION 


dir 


Itr rtl 


Sets the text direction 


lang 


languagecode 


Sets the language code 
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Kevbosrd Attributes 



ATTRIBUTE 


VALUE 


DESCRIPTION 


accesskey 


character 


Sets a keyboard shortcut to access an element 


rabindex 


number 


Sets the tab order of an element 
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HTML EVENT 
ATTRIBUTES 



In This Chapter 

□ Window Events 
—I Form Element Events 
J Keyboard Events 
—I Mouse Events 

New to HTML 4.0 is the ability to let HTML events trigger actions in the browser, 
like starting a JavaScript when a user clicks on an HTML element. The following 
tables list attributes that can be inserted into HTML tags to define event actions. 

SIf you want to learn more about programming with these events, you 
should study w3schools' tutorials on JavaScript and DHTML; 

JavaScript: http :/ / www. w3 schools .com/ j s 
DHTML http : // www. w3seho ols.com/dlitnil 



Window Events 



These attributes are valid only in body and frameset elements. 



ATTRIBUTE 


VALUE 


DESCRIPTION 


onload 


script 


Script to be run when a document loads 


onunload 


script 


Script to be run when a document unloads 
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Form Element Events 



These attributes are valid only in form elements. 



ATTRIBUTE 


VALUE 


DESCRIPTION 


onchange 


script 


Script to be run when the element changes 


onsubmit 


script 


Script to be run when the form is submitted. 


onreset 


script 


Script to be run when the form is reset 


onselect 


script 


Script to be run when the element is selected 


onblur 


script 


Script to be run when the element loses focus 


onfocus 


script 


Script to be run when the element gets focus 



Keyboard Events 

These attributes are not valid in base , bdo , b r , frame , frameset , head , 
html, iframe, meta, param, script, styl e , and ti tl e elements. 



ATTRIBUTE 


VALUE 


DESCRIPTION 


onkeydown 


script 


What to do when key is pressed 


onkeypress 


script 


What to do when key is pressed and released 


onkeyup 


script 


What to do when key is released 



Mouse Events 



These attributes are not valid in base , bdo , br , frame , frameset , head , 
html, iframe, meta, param, script, style, and ti tl e elements. 



ATTRIBUTE 


VALUE 


DESCRIPTION 


onclick 


script 


What to do on a mouse click 


ondblclick 


script 


What to do on a mouse double-click 


onmousedown 


script 


What to do when mouse button is pressed 


onmousemove 


script 


What to do when mouse pointer moves 


onmouseout 


script 


What to do when mouse pointer moves out 
of an element 


onmouseover 


script 


What to do when mouse pointer moves over 
an element 


onmouseup 


script 


What to do when mouse button is released 
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CHAPTER 27 



HTML URL 
ENCODING 



In This Chapter 

□ URL Encoding 

□ Common URL Encoding Characters 

URL Encoding 

URL encoding converts characters into a format that can be safely transmitted over 
the Internet. 

As you learned in Chapter 23, "HTML Uniform Resource Locators," Web brows- 
ers request pages from Web servers by using a URL. The URL is the address of a 
Web page like http://www.w3schools.com. 

URLs can only be sent over the Internet using the ASCII character set. ASCII is a 
7-bit character set containing 128 characters. It contains the numbers from 0-9, the 
uppercase and lowercase English letters from A to Z, and some special characters. 

f "\ See Appendix G, "HTML ISO-8859-1 Reference," for the complete 

r ASCII character set. 

Because URLs often contain characters outside the ASCII set, the URL has to be 
converted. URL encoding converts the URL into a valid ASCII format. It replaces 
unsafe ASCII characters with "%" followed by two hexadecimal digits correspond- 
ing to the character values in the ISO-8859-1 character set. ISO-8859-1 is the 
default character set in most browsers. 

The first 128 characters of ISO-8859-1 are the original ASCII character set (the 
numbers from 0-9, the uppercase and lowercase English alphabet, and some special 
characters). The higher part of ISO-8859-1 (codes from 160-255) contains the 
characters used in Western European countries and some commonly used special 
characters. 



See Appendix H, "HTML Symbol Entities Reference" for the complete 
ISO-8859-1 character set. 
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URLs cannot contain spaces. URL encoding normally replaces a space with a + 

sign- 
Common URL Encoding Characters 



CU At! &CTVB 


tttjt cvrfYinrMr 1 


£ 


0/r.Rfi 
/IfOKJ 


r 


%A3 


© 


%A9 


® 


%AE 


A 


%C0 


A 


%C1 


A 


%C2 


A 


%C3 


A 


%C4 


A 


%C5 


space 


%20 




See the w3schools' HTML Language Code Reference for the complete 
URL Encoding reference. 
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CHAPTER 28 



TURN YOUR PC INTO 
A WEB SERVER 



In This Chapter 

□ Your Windows PC as a Web Server 

□ Installing IIS on Windows Vista and Windows 7 

□ Installing IIS on Windows XP and Windows 2000 

□ Testing Your Web 

Q Your Next Step: A Professional Web Server 

Your Windows PC as a Web Server 

If you want other people to view your pages, you must publish them. To publish 
your work, you must save your pages on a Web server. 

Your own PC can act as a Web server if you install Internet Information Server (IIS) 
or Personal Web Server (PWS) . IIS or PWS turns your computer into a Web server. 
Microsoft IIS and PWS are free Web server components. 



NOTE 



Mac OS X users can also run their own local web server sim- 
ply by checking the "Web Sharing" option in the Systems Sharing prefer- 
ence and then sticking their .html/.css/..Web files in their "Sites" folder. 
See: http:/ydocs.info.apple.com/article.html?path=Mac/10.6/en/8236. html 



internet Information Server (MS) 

IIS is a set of Internet-based services for servers created by Microsoft for use with 
Microsoft Windows. IIS comes with Windows 2000, XP, Vista, and 7. It is also 
available for Windows NT. 

IIS is easy to install and ideal for developing and testing Web applications. IIS 
includes Active Server Pages (ASP), a server-side scripting standard that can be used 
to create dynamic and interactive Web applications. 
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If you want to know more about ASP, see the w3schools ASP tutorial: 
http:/ / www.w3schools.com/asp 




Personal Web Server (PWS) 

PWS is for older Windows systems like Windows 95, 98, and NT. PWS is easy to 
install and can be used for developing and testing Web applications including ASP 



NOTE 



We don't recommend running PWS for anything other than training. 
It is outdated and has security issues. 



Windows Web Server Versions 

Not all versions of Windows support IIS and/or PWS, but most do. Here's a rela- 
tively complete list. 

Windows 7 Home, Professional, Enterprise, and Ultimate come with IIS 7.5 

Windows Vista Business, Enterprise and Ultimate come with IIS 7 

Windows Vista Home Premium comes with IIS 7 

»► Windows Vista Home Edition does not support PWS or IIS 

Windows XP Professional comes with IIS 5.1 

Windows XP Home Edition does not support IIS or PWS 

Windows 2000 Professional comes with IIS 5.0 

Windows NT Professional comes with IIS 3 and also supports IIS 4 

Windows NT Workstation supports PWS and IIS 3 

Windows Me does not support PWS or IIS 

i Windows 98 comes with PWS 

Windows 95 supports PWS 



Installing IIS on Windows Vista and 
Windows 7 

Follow these steps to install IIS on Windows Vista or 7: 

1. Open the Control Panel from the Start menu. 

2. Double-click Programs and Features. 
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3. Click "Turn Windows features on or off" (a link to the left). 

4. Select the check box for Internet Information Services (IIS), and click OK. 

After you install IIS, be sure to run Microsoft Update to install all patches for bugs 
and security problems. Test your Web, as explained later in this chapter. 

Installing IIS on Windows XP and Win- 
dows 2000 

Follow these steps to install IIS on Windows XP and Windows 2000: 

1. On the Start menu, click Settings and select Control Panel. 

2. Double-click Add or Remove Programs. 

3. Click Add/Remove Windows Components. 

4. Click Internet Information Services (IIS). 

5. Click Details. 

6. Select the check box for World Wide Web Service, and click OK. 

7. In Windows Component selection, click Next to install IIS. 

After you install IIS, be sure to run Microsoft Update to install all patches for bugs 
and security problems. Test your Web, as described next. 

Testing Your Web 

After you install IIS or PWS, follow these steps: 

1 . Look for a new folder called Inetpub on your hard drive. 

2. Open the Inetpub folder, and find a folder named wwwroot. 

3. Create a new folder under wwwwroot and name it something like "MyWeb." 

4. Write some ASP code and save the file as testl.asp in the new folder. 

5. Make sure your Web server is running. 

6. Open your browser and type "http://localhost/MyWeb/testl.asp" to view your 
first Web page. 



NOTE 



Look for the IIS (or PWS) symbol in your Start menu or taskbar.The 
program has functions for starting and stopping the Web server, disabling and 
enabling ASP, and much more. 
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Installing PWS on Windows 95,98, and Windows 
NT 

Follow these steps to install PWS on Windows 95. 98, and Windows NT: 

Windows 98. Open the Add-ons folder on your Windows CD, find the PWS 
folder and double-click runsetup.exe to install PWS. 

Windows 95 or Windows NT. Download Windows NT 4.0 Option Pack 
from Microsoft, and install PWS. 

Test your Web as described earlier. 

Your Next Step: A Professional Web 
Server 

If you do not want to use PWS or IIS, you must upload your files to a public server. 
Most Internet service providers (ISPs) will offer to host your Web pages. If your 
employer has an Internet server, you can ask him to host your Web site. 

If you are really serious about this, you should install your own Internet server. 
Before you select an ISP, be sure you read w3schools Web Hosting Tutorial at: 

^^^^ http :/ /www. w3 schools.com/hosting 
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HTML AND CSS 
SUMMARY 



You Have Learned HTML, Now What? 

This tutorial has taught you how to use HTML to create your own Web site, 

HTML is the universal markup language for the Web. HTML lets you format text, 
add graphics, create links, input forms, frames, and tables, and so on, and save it all 
in a text file that any browser can read and display. 

The key to HTML is the tags, which indicate what content is coming up. 

For more information on HTML, the w3schools.com Web site offers two helpful 
tools you can study: 





HTML Examples: http://www.w3schools.com/html/html_examples.asp 
HTML Reference: http://www.w3schools.com/tags 



What's Next? 

The next step is to learn CSS, 



CSS 

CSS is used to control the style and layout of multiple Web pages all at once. With 
CSS, all formatting can be removed from the HTML document and stored in a 
separate file. CSS gives you total control of the layout, without messing up the 
document content, 

EYou can learn more about styles and CSS in the companion book Learn 
CSS and HTML with wSscbook, or by visiting http://www.w3 schools, 
com/ess . 
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Section 
Appendixes 



□ Appendix A: HTML 4.01 Reference 

□ Appendix B: HTML Standard Attributes 

□ Appendix C: HTML Standard Event Attributes 

□ Appendix D: HTML Elements and Valid Doctypes 

□ Appendix E: HTML Character Sets 

□ Appendix F: HTML ASCII Reference 

□ Appendix G: HTML ISO-8859-1 Reference 

□ Appendix H: HTML Symbol Entities Reference 

□ Appendix I: HTML URL Encoding Reference 



APPENDIX A 

HTML 4.01 
REFERENCE 



If you visit this reference on the w3schools Web site, you will find links for each 
item in the Property column that point to syntax, examples, browser support, and 
so on; 




http://www.w3schools.com/tags 



DTD 



This indicates in which HTML 4.01 DTD the tag is allowed. S=Strict, 
T= Transitional, and F=Franieset. 



f For more information about DTDs, see Chapter 19, "Why Use HTML 

— * 4.0?" 

EFor more information about DTDs, visit the w3schools reference HTML 
<!DOCTYPE> Declaration at http://www.w3schools.com/tags/tag_ 
doctype.asp. 



Ordered Alphabetically 



TAG 


DESCRIPTION 


DTD 


<!-...--> 


Defines a comment 


STF 


<!DOCTYPE> 


Defines the document type 


STF 


<a> 


Defines an anchor 


STF 


<abbr> 


Defines an abbreviation 


STF 


<acronym> 


Defines an acronym 


STF 


<address> 


Defines contact information for the 
author/ owner of a document 


STF 
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TAG 


DESCRIPTION 


DTD 


<applet> 


Deprecated. Defines an embedded 
applet 


TF 


<area /> 


Defines an area inside an image- map 


STF 


<D> 


Defines bold text 


olr 


<base / > 


Defines a default address or a default 
target for all links on a page 


err 


<basefont /> 


Deprecated. Defines a default font, 
color, or size for the text in a page 


TF 


<bdo> 


Defines the text direction 


STF 


<big> 


Defines big text 


STF 


<blockquote> 


Defines a long quotation 


STF 


<body> 


Defines the document's body 


STF 


<br/> 


Defines a single line break 


STF 


<button> 


Defines a pushbutton 


STF 


<caption> 


Defines a table caption 


STF 


<center> 


Deprecated. Defines centered text 


TF 


<cite> 


Defines a citation 


STF 


<code> 


Defines computer code text 




<col /> 


Defines attribute values for one or more 
columns in a table 


STF 


<col£n"oup> 


Defines a group of columns in a table 
for formatting 


err 


<dd> 


Defines a description of a term in a 
definition list 


STF 


<del> 


Defines deleted text 


STF 


<dfn> 


Defines a definition term 


STF 


<dir> 


Deprecated. Defines a directory list 


TF 


<div> 


Defines a section in a document 


STF 


<dl> 


Defines a definition list 


STF 


<dt> 


Defines a term (an item) in a definition 
list 




<ctn> 


Defines emphasized text 




fi f* 1 <H 


l—^^Tllil^TA <ri |_'*J1 Lltl diuuuu tmiltlll j 111 <± 

form 


STF 


<font> 


Deprecated. Defines font, color, and size 
for text 


TF 


<fcrm> 


Defines an HTML form for user input 


STF 
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TAG 


DESCRIPTION 


DTD 


< frame /> 


Defines a window (a frame) in a frameset 


F 


<frameset> 


Defines a set of frames 


F 


<hl> ro <h6> 


Defines HTML headings 


STF 


<head> 


Defines information about the docu- 
ment 


STF 


<hr /> 


Defines a horizontal line 


STF 


<html> 


Defines an HTML document 


STF 


<i> 


Defines italic text 


STF 


<iframe> 


Defines an inline frame 


TF 


<img /> 


Defines an image 


STF 


<input /> 


Defines an input control 


STF 


<ins> 


Defines inserted text 


STF 


<isindex> 


Deprecated. Defines a searchable index 
related to a document 


TF 


<kbd> 


Defines keyboard text 


STF 


<label> 


Defines a label for an input element 


STF 


<legend> 


Defines a caption for a fieldset element 


STF 


<li> 


Defines a list item 


STF 


<link /> 


Defines the relationship between a 
document and an external resource 


STF 


<map> 


Defines an image-map 


STF 


<menu> 


Deprecated* Defines a menu list 


TP 


<meta /> 


Defines metadata about an HTML 
document 


STF 


<notrames> 


L^ennes an alternate content tor users 
that do not support frames 


1 r 


<noscript> 


Defines an alternate content for users 
that do not support client-side scripts 


STF 


<object> 


Defines an embedded object 


STF 


<ol> 


Defines an ordered list 


STF 


<optgroup> 


Defines a group of related options in a 
select list 


STF 


<option> 


Defines an option in a select list 


STF 


<p> 


Defines a paragraph 


STF 


<param /> 


Defines a parameter for an object 


STF 


<pre> 


Defines preformatted text 


STF 
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TAG 


DESCRIPTION 


DTD 


<q> 


Defines a short quotation 


STF 


<s> 


Deprecated. Defines strikethrough text 


TF 


<samp> 


Defines sample computer code 


STF 


<script> 


Defines a client-side script 


STF 


<select> 


Defines a select list (drop-down list) 


STF 


<small> 


Defines small text 


STF 


<span> 


Defines a section in a document 


STF 


<strike> 


Deprecated. Defines strikethrough text 


TF 


<strong> 


Defines strong text 


STF 


<style> 


Defines style information for a docu- 
ment 


STF 


<sub> 


Defines subscripted text 


STF 


<sup> 


Defines superscripted text 


STF 


<rable> 


Defines a table 


STF 


<tbody> 


Groups the body content in a table 


STF 


<td> 


Defines a cell in a table 


STF 


<textarea> 


Defines a multiline text input control 


STF 


<tfoot> 


Groups the footer content in a table 


STF 


<rh> 


Defines a header cell in a table 


STF 


<thead> 


Groups the header content in a table 


STF 


<title> 


Defines the title of a document 


STF 


<tr> 


Defines a row in a table 


STF 


<tr> 


Defines teletype text 


STF 


<u> 


Deprecated. Defines underlined text 


TF 


<ul> 


Defines an unordered list 


STF 


<var> 


Defines a variable part of a text 


STF 


<xmp> 


Deprecated. Defines preformatted text 




dered by Function 


TAG 


DESCRIPTION 


DTD 


Basic 


<!DOCTYPE> 


Defines the document type 


STF 


<html> 


Defines an HTML document 


STF 


<body> 


Defines the document's body 


STF 
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TAG 


DESCRIPTION 


DTD 


<hl> to <h6> 


Defines HTML headings 


STF 


<P> 


Defines a paragraph 


STF 


<br /> 


Inserts a single line break 


STF 


<hr /> 


Defines a horizontal line 


STF 


<!-...--> 


Defines a comment 


STF 


Formatting 


<acronym> 


Defines an acronym 


STF 


<abbr> 


Defines an abbreviation 


STF 


<address> 


Defines contact information for the 
author/owner of a document 


STF 


<b> 


Defines bold text 


STF 


<bdo> 


Defines the text direction 


STF 


<big> 


Defines big text 


STF 


<blockquote> 


Defines a long quotation 


STF 


<center> 


Deprecated. Defines centered text 


TF 


<cite> 


Defines a citation 


STF 


<code> 


Defines computer code text 


STF 


<del> 


Defines deleted text 


STF 


<dfn> 


Defines a definition term 


STF 


<em> 


Defines emphasized text 


STF 


<font> 


Deprecated. Defines font, color, and size 
for text 


TF 


<i> 


Defines italic text 


STF 


<ins> 


Defines inserted text 


STF 


<kbd> 


Defines keyboard text 


STF 


<pre> 


Defines preforniatted text 


STF 


<q> 


Defines a short quotation 


STF 


<s> 


Deprecated. Defines strikethrough text 


TF 


<sanip> 


Defines sample computer code 


STF 


<small> 


Defines small text 


STF 


<strike> 


Deprecated. Defines strikethrough text 


TF 


<strong> 


Defines strong text 


STF 


<sub> 


Defines subscripted text 


STF 


<sup> 


Defines superscripted text 


STF 


<ur> 


Defines teletype text 


STF 
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TAG 


DESCRIPTION 


DTD 


<u> 


Deprecated. Defines underlined text 


TF 


<var> 


Defines a variable part of a text 


STF 


<jcmp> 


Deprecated. Defines preformatted text 




Forms 


<form> 


Defines an HTML form for user input 


STF 


<inpur /> 


Defines an input control 


STF 


<rextarea> 


Defines a multiline text input control 


STF 


<button> 


Defines a pushbutton 


STF 


<select> 


Defines a select list (drop-down list) 


STF 


<optgroup> 


Defines a group of related options in a 
select list 


STF 


<option> 


Defines an option in a select list 


STF 


<label> 


Defines a label for an input element 


STF 


<fieldset> 


Defines a border around elements in a 
form 


STF 


<legend> 


Defines a caption for a fieldset element 


STF 


<isindex> 


Deprecated. Defines a searchable index 
related to a document 


TF 


Frames 


< frame /> 


Defines a window (a frame) in a frameset 


F 


<frameset> 


Defines a set of frames 


F 


<noframes> 


Defines an alternate content for users 
that do not support frames 


TF 


<iframe> 


Defines an inline frame 


TF 


Images 






<img /> 


Defines an image 


STF 


<map> 


Defines an image-map 


STF 


<area /> 


Defines an area inside an image- map 


STF 


Links 






<a> 


Defines an anchor 


STF 


<link /> 


Defines the relationship between a 
document and an external resource 


STF 


Lists 


<ul> 


Defines an unordered list 


STF 


<ol> 


Defines an ordered list 


STF 
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TAG 


DESCRIPTION 


DTD 


<li> 


Defines a list item 


STF 


<dir> 


Deprecated. Defines a directory list 


TF 


<Ql> 


Uennes a clennltlon list 


CTTT 


<dt> 


Defines a term (an item) in a definition 
list 


oir 


<dd> 


Defines a description of a term in a 
definition list 


STF 


<menu> 


Deprecated. Defines a menu list 


TF 


Tables 


<table> 


Defines a table 


STF 


<caprion> 


Defines a table caption 


STF 


<th> 


Defines a header cell in a table 


STF 


<rr> 


Defines a row in a table 


STF 


<rd> 


Defines a cell in a table 


STF 


<thead> 


Groups the header content in a table 


STF 


<tbody> 


Groups the body content in a table 


STF 


<tfoot> 


Groups the footer content in a table 


STF 


<col /> 


Defines attribute values for one or more 
columns in a table 


STF 


<colgroup> 


Defines a group of columns in a table 
for formatting 


STF 


Styles 


<style> 


Defines style information for a docu- 
ment 


STF 


<div> 


Defines a section in a document 


STF 


<span> 


Defines a section in a document 


STF 


Meta Info 






<head> 


Defines information about the docu- 
ment 


STF 


<ritle> 


Defines the document title 


STF 


<meta> 


Defines metadata about an HTML 
document 


STF 


<base /> 


Defines a default address or a default 
target for all links on a page 


STF 


<basefont /> 


Deprecated. Defines a default font, 
color, or size for the text in a page 


TF 
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TAG 


DESCRIPTION 


DTD 


Programming 


<scnpt> 


Defines a client-side script 


olr 


<noscript;> 


Defines an alternate content for users 
that do not support client-side scripts 


STF 


<applet> 


Deprecated. Defines an embedded 
applet 


TF 


<objecr> 


Defines an embedded object 


STF 


<param !> 


Defines a parameter for an object 


STF 
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HTML 
STANDARD 
ATTRIBUTES 



The attributes listed in this appendix are standard. They are supported by all HTML 
and tags with a few exceptions. 

If you visit this reference on die w3schools Web site, you will find links for each 
item in the Attribute column that point to syntax } examples, tips, browser support, 
and so on: 

^^^^^ hrtp : // www. w3 schools.com/ tags / rets tan dardattrib Lites .asp 



Core Attributes 



Not valid in base, head, html, meta, param, script, style, and title ele- 
ments 



ATTRIBUTE 


VALUE 


DESCRIPTION 


class 


classname 


Specifies a classname for an element 


id 


id 


Specifies a unique id for an element 


style 


styledefinition 


Specifies an inline style for an element 


ride 


text 


Specifies extra information about an 
element 
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Language Attributes 



Not valid in base, br, frame, frameset, hr, if rame, param, and script ele- 
ments 



ATTRIBUTE 


VALUE 


DESCRIPTION 


dir 


ltr 
rtl 


Specifies the text direction for the 
content in an element 


lang 


languagecode 


Specifies a language code for the 
content in an element. Language code 
reference 




For a complete language code reference, visit the w3schools Web site: 
http;/ /www, w3schools.com/ tags/ reflanguagecodes.asp 



Keyboard Attributes 



ATTRIBUTE 


VALUE 


DESCRIPTION 


accesskey 


character 


Specifies a keyboard shortcut to access an 
element 


tabindex 


number 


Specifies the tab order of an element 
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HTML STANDARD 
EVENT ATTRIBUTES 



HTML 4 added the ability to let events trigger actions in a browser, like starring a 
JavaScript when a user clicks on an element. 

ETo learn more about programming events, please read Learn JavaScript 
and Ajax with w3schook, also from Wiley Publishing, or visit the JavaS- 
cript tutorial at www.w3schools.com/js. 

Also be sure to visit the DHTML tutorial at www.w3schools.com/dhtml 

The following tables list the standard event attributes that can be inserted into 
HTML elements to define event actions. 

body and frameset Events 

These attributes can only be used in <body> or <f raraeset>: 



ATTRIBUTE 


VALUE 


DESCRIPTION 


onload 


script 


Script to be run when a document loads 


onunload 


script 


Script to be run when a document unloads 



Form Events 

These attributes can be used in form elements. 



ATTRIBUTE 


VALUE 


DESCRIPTION 


onblur 


script 


Script to be run when an element loses focus 


onchange 


script 


Script to be run when an element changes 


onfocus 


script 


Script to be run when an element gets focus 


onreset 


script 


Script to be run when a form is reset 


onselect 


script 


Script to be run when an element is selected 


oris Lib mi t 


script 


Script to be run when a form is submitted 
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Image Events 

This attribute can be used with the i mg element. 



ATTRIBUTE 


VALUE 


DESCRIPTION 


onabort 


script 


Script to be run when loading of an image is 
interrupted 



Keyboard Events 

Valid in all elements except base, bdo, br, frame, frameset, head, html, 
if rame, meta, param, scri pt, styl e, and titl e. 



ATTRIBUTE 


VALUE 


DESCRIPTION 


onkeydown 


script 


Script to be run when a key is pressed 


onkeypress 


script 


Script to be run when a key is pressed and 
released 


onkeyup 


script 


Script to be run when a key is released 



Mouse Events 



Valid in all elements except base, bdo, br, frame, frameset, head, html, 
if rame, meta, param, scri pt, styl e, and titl e. 



ATTRIBUTE 


VALUE 


DESCRIPTION 


onclick 


script 


Script to be run on a mouse click 


ondblclick 


script 


Script to be run on a mouse double-click 


onmo usedown 


script 


Script to be run when mouse button is clicked 


onmousemove 


script 


Script to be run when mouse pointer moves 


onmouseout 


script 


Script to be run when mouse pointer moves 
out of an element 


onmouseover 


script 


Script to be run when mouse pointer moves 
over an element 


onmouseup 


script 


Script to be run when mouse button is released 
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HTML 
ELEMENTS AND 
VALID DOCTYPES 



If you visit this reference on the wjschools Web site, you will find links for each 
item in the Tag column that point to syntax, examples, tips, browser support, and 
so on: 

www.w3schools.com/ tags/tag_doctype.asp 

For more information aboutDTDs, see Chapter 19, " Why Use HTML 4.0?" 

For more information about DTDs, visit the w3schools reference "HTML <!DOC- 
TYPE> Declaration" at: 

www.w3schools.com/tags/ tag_doctype.asp. 



The following table lists all HTML elements and defines which doctype declara- 
tions (DTDs) each element appears in. 



TAG 


HTML 4.01 


TRANSITIONAL 


STRICT 


FRAMESET 


<a> 


Yes 


Yes 


Yes 


<abbr> 


Yes 


Yes 


Yes 


<acronym> 


Yes 


Yes 


Yes 


<address> 


Yes 


Yes 


Yes 


<applet> 


Yes 


No 


Yes 


<area /> 


Yes 


Yes 


Yes 


<b> 


Yes 


Yes 


Yes 


<base l> 


Yes 


Yes 


Yes 


<basefont /> 


Yes 


No 


Yes 


<bdo> 


Yes 


Yes 


Yes 
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TAG 


HTML 4.01 


TRANSITIONAL 


STRICT 


FRAMESET 


<blockquote> 


Yes 


Yes 


Yes 


<body> 


Yes 


Yes 


Yes 


<br l> 


Yes 


Yes 


Yes 


<b utton > 


Yes 


Yes 


Yes 


<caption> 


Yes 


Yes 


Yes 


<center> 


Yes 


No 


Yes 


<cite> 


Yes 


Yes 


Yes 


<code> 


Yes 


Yes 


Yes 


<col I> 


Yes 


Yes 


Yes 


<colgroup> 


Yes 


Yes 


Yes 


<dd> 


Yes 


Yes 


Yes 


<del> 


Yes 


Yes 


Yes 


<dfn> 


Yes 


Yes 


Yes 


<dir> 


Yes 


No 


Yes 


<div> 


Yes 


Yes 


Yes 


<dl> 


Yes 


Yes 


Yes 


<dt> 


Yes 


Yes 


Yes 


<em> 


Yes 


Yes 


Yes 


<fieldset> 


Yes 


Yes 


Yes 


<font> 


Yes 


No 


Yes 


<form> 


Yes 


Yes 


Yes 


< frame /> 


No 


No 


Yes 


<frameset> 


No 


No 


Yes 


<hl> to <h6> 


Yes 


Yes 


Yes 


<head> 


Yes 


Yes 


Yes 


<hr /> 


Yes 


Yes 


Yes 


<html> 


Yes 


Yes 


Yes 


<i> 


Yes 


Yes 


Yes 


<iframe> 


Yes 


No 


Yes 


<img /> 


Yes 


Yes 


Yes 


<input /> 


Yes 


Yes 


Yes 


<ins> 


Yes 


Yes 


Yes 
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TAG 


HTML 4.01 


TRANSITIONAL 


STRICT 


FRAMESET 


<kbd> 


Yes 


Yes 


Yes 


<label> 


Yes 


Yes 


Yes 


<legend> 


Yes 


Yes 


Yes 


<li> 


Yes 


Yes 


Yes 


<link /> 


Yes 


Yes 


Yes 


<map> 


Yes 


Yes 


Yes 


<menu> 


Yes 


No 


Yes 


<meta /> 


Yes 


Yes 


Yes 


<noframes> 


Yes 


No 


Yes 


<noscript> 


Yes 


Yes 


Yes 


<object> 


Yes 


Yes 


Yes 


<ol> 


Yes 


Yes 


Yes 


<optgroup> 


Yes 


Yes 


Yes 


<option> 


Yes 


Yes 


Yes 


<p> 


Yes 


Yes 


Yes 


<paiam i> 


Yes 


Yes 


Yes 


<pre> 


Yes 


Yes 


Yes 


<q> 


Yes 


Yes 


Yes 


<s> 


Yes 


No 


Yes 


<samp> 


Yes 


Yes 


Yes 


<scripr> 


Yes 


Yes 


Yes 


<select> 


Yes 


Yes 


Yes 


<small> 


Yes 


Yes 


Yes 


<span> 


Yes 


Yes 


Yes 


<strike> 


Yes 


No 


Yes 


<strong> 


Yes 


Yes 


Yes 


<style> 


Yes 


Yes 


Yes 


<sub> 


Yes 


Yes 


Yes 


<sup> 


Yes 


Yes 


Yes 


<table> 


Yes 


Yes 


Yes 


<tbody> 


Yes 


Yes 


Yes 


<td> 


Yes 


Yes 


Yes 
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TAG 


HTML 4.01 


TRANSITIONAL 


STRICT 


FRAMESET 


<tfoot> 


Yes 


Yes 


Yes 


<th> 


Yes 


Yes 


Yes 


<thead> 


Yes 


Yes 


Yes 


<title> 


Yes 


Yes 


Yes 


<tr> 


Yes 


Yes 


Yes 


<tt> 


Yes 


Yes 


Yes 


<LL> 


Yes 


No 


Yes 


<ul> 


Yes 


Yes 


Yes 


<var> 


Yes 


Yes 


Yes 
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HTML 

CHARACTER SETS 



For more information about working with character sets, see Chapter 27, 
"URL Encoding." 

ASCII Characters 

To display an HTML page correctly, die browser must know what character set to 
use. The character set for the early World Wide Web was ASCII. ASCII supports 
the numbers from 0-9, the uppercase and lowercase English alphabet, and some 
special characters. 

tj> For more about ASCII, see Appendix F, "HTML ASCII Reference." 

EA complete list of the ASCII character set is available at www. w3 schools, 
com/ tags/ refasci i .asp . 



ISO-8859-1 Characters 

Because many countries use characters that are not a part of ASCII, the default 
character set for modern browsers is ISO-8859-1 . 




For more about ISO characters, see Appendix G, "HTML ISO-8859-1 
Reference." 



SA complete list of the ISO-8859-1 character set is available at www. 
w3schools.com/ tags/refentities .asp. 
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Other ISO Character Sets 

It is the International Organization for Standardization (ISO) that defines the stan- 
dard character sets for different alphabets/languages. 



IMM^I If a Web page uses a different character set than ISO-8859-1, it should be speci- 
fied in the <meta>tag. 



The different character sets being used around the world are listed in the following 
table: 



CHARACTER SET 


DESCRIPTION 


COVERS 


ISO-8859-1 


Latin alphabet part 1 


North America, Western 
Europe, Latin America, the 
Caribbean, Canada, Africa 


ISO-8859-2 


Latin alphabet part 2 


Eastern Europe 


ISO-8859-3 


Latin alphabet part 3 


SE Europe, Esperanto, mis- 
cellaneous others 


ISO-8859-4 


Latin alphabet part 4 


Scandinavia/Baltics (and oth- 
ers not in ISO-8859-1) 


ISO-8859-5 


Latin/Cyrillic part 5 


The languages that are using 
a Cyrillic alphabet such as 
Bulgarian, Belarusian, Rus- 
sian and Macedonian 


ISO-8859-6 


La tin/ Arabic part 6 


The languages that are using 
the Arabic alphabet 


tQO RS^q 7 


Latin/Greek part 1 


The modern Greek language 
as well as mathematical sym- 
bols derived from the Greek 


ISO-8859-8 


Latin/Hebrew part 8 


The languages that are using 
the Hebrew alphabet 


ISO-8859-9 


Latin 5 part 9 


The Turkish language. Same 
as ISO-8859-1 except Turkish 
characters replace Icelandic 
ones 


ISO-8859-10 


Latin 6 Lappish, Nor- 
dic, Eskimo 


The Nordic languages 


ISO-8859-15 


Latin 9 (aka Latin 0) 


Similar to ISO-8859-1 but 
replaces some less common 
symbols with the euro sign 
and some other missing 
characters 
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CHARACTER SET 


DESCRIPTION 


COVERS 


ISO-2022-JP 


Latin/Japanese part 1 


The Japanese language 


ISO-2022-JP-2 


Latin/Japanese part 2 


The Japanese language 


ISO-2022-KR 


Latin/Korean part 1 


The Korean language 



Unicode Standard 



Because the character sets listed in the preceding table are limited in size and are not 
compatible in multilingual environments, the Unicode Consortium developed the 
Unicode Standard. The Consortium's goal is to replace the existing character sets 
with its standard Unicode Transformation Format (UTF). 

The Unicode Standard covers all the characters, punctuations, and symbols in the 
world. Unicode enables processing, storage, and interchange of text data no matter 
what the platform, no matter what the program, no matter what the language. 



TIP 



The first 256 characters of Unicode character sets correspond to the 256 char- 
acters of ISO-S859-1 . 



The Unicode Standard has become a success and is implemented in XMT, Java, 
ECMAScript QavaScript), TDAP, CORBA 3.0, WML, and so on. The Unicode 
Standard is also supported in many operating systems and all modern browsers. The 
Unicode Consortium cooperates with the leading standards development organiza- 
tions, like ISO, W3C, and ECMA. 

Unicode can be implemented by different character sets. The most commonly used 
encodings are UTF-8 and UTF- 16 include the following: 



CHARACTER SET 


DESCRIPTION 


UTF-8 


A character in UTF-8 can be from 1 to 4 bytes long. 
UTF-8 can represent any character in the Unicode 
standard. UTF-8 is backwards compatible with ASCII. 
UTF-8 is the preferred encoding for e-mail and Web 
pages. 


UTF-16 


16-bit Unicode Transformation Format is a variable- 
length character encoding for Unicode, capable of 
encoding the entire Unicode repertoire. UTF-16 is 
used in major operating systems and environments, like 
Microsoft Windows 2000/XP/2003/Visra/CE and the 
Java and .NET byte code environments. 



NOTE 



All HTML 4 processors already support UTF-8, and all XML processors 
support UTF-8 and UTF-16. 
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HTML ASCII 
REFERENCE 



For more information about working with character sets, see Chapter 27, 
"URL Encoding." 

ASCII Character Set 

The ASCII character set is used to send information between computers on the 
Internet. ASCII stands for the American Standard Code for Information Inter- 
change. It was designed in the early 1960s as a standard character set for computers 
and hardware devices like teleprinters and taped rives. 

ASCII is a 7-bit character set containing 128 characters. It contains the numbers 
from 0-9, the uppercase and lowercase English letters from A to Z, and some special 
characters. The character sets used in modern computers, HTML, and the Internet 
are all based on ASCII. 

The following table lists the 128 ASCII characters and their equivalent HTML 
entity codes. 

SA complete list of the ASCII character set is also available at 
www.w3schools.com/tags/ref_ascii.asp. 




ASCII Printable Characters 



ASCH CHARACTER 


HTML ENTITY CODE 


DESCRIPTION 




  


space 


i 


! 


exclamation mark 




" 


quotation mark 


# 


# 


number sign 


$ 


$ 


dollar sign 


% 


% 


percent sign 


& 


& 


ampersand 
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ASCH CHARACTER 


HTML ENTITY CODE 


DESCRIPTION 


■ 


&#39; 


apostrophe 


( 


( 


left parenthesis 


) 


) 


right parenthesis 


* 


* 


asterisk 


+ 


+ 


plus sign 


1 


, 


comma 


_ 


- 


hyphen 




. 


period 


/ 


/ 


slash 


0 


0 


digit 0 


1 


1 


digit 1 


2 


2 


digit 2 


3 




digit 3 


4 


4 


digit 4 


5 


5 


digit 5 


6 


6 


digit 6 


7 


7 


digit 7 


8 


8 


digit 8 


9 


9 


digit 9 




: 


colon 




; 


semicolon 


< 


< 


less-than 


= 


= 


equals-to 


> 


> 


greater-man 




? 


question mark 


@ 


@ 


at sign 


A 


A 


uppercase A 


B 


B 


uppercase B 


C 


C 


uppercase C 


D 


D 


uppercase D 


E 


E 


uppercase E 


F 


F 


uppercase F 


G 


G 


uppercase G 


H 


H 


uppercase H 
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H 1 ML r,JN 1 1 1 Y LUUh 


UhbCKll J 1 1UJN 


T 

1 




uppercase I 


T 

J 


J 


uppercase J 


is. 


cfJF/3; 


uppercase K 


T 

L 


L 


uppercase L 


M 


oi#77; 


uppercase M 


TvT 

IN 




uppercase N 


U 


O 


uppercase U 


n 


P 


uppercase 1 J 






uppercase 


D 

R 


R 


uppercase K 


c 


OrJiOJ. 


c 

uppercase o 


T 
1 


S£#84; 


uppercase 1 


T T 

u 




T T 

uppercase U 


XT 
V 


CtJFoo; 


uppercase V 


w 


W 


uppercase W 


V 

A 


X 


uppercase A 


v 
I 


txjfoV; 


uppercase Y 


Z, 


Z 


uppercase Z, 


r 
L 


txJfy 1 ; 


lert square bracket 


\ 


\ 


backslash 


i 

] 


&#93j 


right square bracket 




£x#y4; 


caret 




_ 


underscore 




C£#9o; 


grave accent 




a 


i 

lowercase a 


b 


o£#9o; 


1 L 

lowercase b 


c 




lowercase c 


j 
a 


O w-tt 1 / 'if 'l 

c£#lU(J; 


i j 

lowercase a 


e 




i 

lowercase e 


r 

r 


ixJf 1 UZ; 


lowercase f 


g 


CC#1U3; 


lowercase g 


u 
n 




lowercase h 


i 


i 


lowercase i 


j 


j 


lowercase j 


k 


k 


lowercase k 
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ASCH CHARACTER 


HTML ENTITY CODE 


DESCRIPTION 


1 


l 


lowercase 1 


m 


m 


lowercase m 


n 


n 


lowercase n 


o 


o 


lowercase o 


P 


p 


lowercase p 


q 


&#U3; 


lowercase q 


r 


r 


lowercase r 


s 


s 


lowercase s 


t 


t 


lowercase t 


Ll 


u 


lowercase u 


V 




lowercase v 


W 


mn$>i 


lowercase w 


X 


x 


lowercase x 


y 


y 


lowercase y 


z 


z 


lowercase z 


f 


{ 


left curly brace 




| 


vertical bar 


} 


} 


right curly brace 




~ 


tilde 



ASCII Device Control Characters 



The ASCII device control characters were originally designed to control hardware 
devices. Control characters have nothing to do inside an HTML document. 



ASCH CHARACTER 


HTML ENTITY CODE 


DESCRIPTION 


NUL 


&#00; 


null character 


SOH 


&#01; 


start of header 


STX 


&#02; 


start of text 


ETX 


&#03; 


end of text 


EOT 


&#04; 


end of transmission 


ENQ 


&#05; 


enquiry 


ACK 


&#06; 


acknowledge 


BEL 


&#07; 


bell (ring) 


BS 


&#08; 


backspace 
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H 1 ML bJN 1 1 1 Y LUJJh 


UhiCKlF 1 1UJN 


UT 

t± 1 


	 


horizontal tab 


T T7 

Lb 



 


line reed 


V 1 


Rr-ffil 1 . 

o£#l Ij 


vertical tab 


bb 


&#12; 


£ £ J 

form teed 






carriage return 




o£#14; 


shift out 




&#1 5; 


shift in 


DLL 


&#16; 


j ^ i : i 

data link escape 




&£#!/; 


device control 1 


JJC2 


&#18; 


device control 2. 


r^r^ a. 
DLo 


o£#iy; 


device control j 




&#2U; 


J J 1 A 

device control 4 


Mil/ 

NAK 


&#21; 


negative acknowledge 


j I IN 


oiffZZ; 


synchronize 


LIB 


&#23; 


end transmission block 


CAIN 


&#24; 


cancel 


LM 




J £ J ' 

end or medium 


CT TD 


&#26; 


substitute 




ix#.Z/; 


escape 


TIC 


&#28; 


hie separator 






group separator 


RS 


&#30; 


record separator 


US 


&#31; 


unit separator 


DEL 


&#127; 


delete (rubout) 
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APPENDIX G 

HTML ISO-8859-1 
REFERENCE 



Modern browsers support several character sets: 

[ ^> ASCII character set (see Appendix F, "HTML ASCII Reference") 

►► Standard ISO character sets (see Appendix E, "HTML Character 
Sets") 

Unicode Transformation Format (UTF) (see Appendix E, "HTML 
Character Sets") 

Mathematical symbols, Greek letters, and other symbols (see Appen- 
dix H, "HTML Symbol Entities Reference") 



ISO-8859-1 

ISO-8859-1 is the default character set in most browsers. 

The first 128 characters of ISO-8859-1 make up the original ASCII character set 
(the numbers from 0-9, the uppercase and lowercase English alphabet, and some 
special characters). 

The higher part of ISO-8859-1 (codes from 160-255) contains the characters used 
in Western European countries and some commonly used special characters. 



Reserved Characters in HTML 

Some characters are reserved in HTML. For example, you cannot use the greater- 
than or less-than signs within your text because the browser could mistake them 
for markup. 

Entities are used to implement reserved characters or to express characters that can- 
not easily be entered with the keyboard. 

HTML processors must support the five special characters listed in the following 
table. 
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Entity names are case sensitive. 



CHARACTER 


ENTITY 
NUMBER 


ENTITY NAME 


DESCRIPTION 




8c#34; 


" 


quotation mark 


i 


&#39; 


&apos; (does not 
work in IE) 


apostrophe 


& 


& 


& 


ampersand 


< 


3c#60; 


< 


less- than 


> 


> 


> 


greater- than 



ISO 8859-1 Symbols 



CHAKAlL. 1 liK 


fcJN 1 1 1 Y 

NUMBER 


EMTTTV "NT A ArfTT 

hJN 1 1 1 I JNAM.h 


JJriSL J Kll J 1 1UJN 




  


  


nonbreaking space 




Q T-it 1 it 1 


o,; 1 


Inverted exclama- 
tion mark 




¢ 


¢ 


cent 


£ 


fc#163; 


£ 


pound 


a 


¤ 


¤ 


currency 


¥ 


¥ 


¥ 


yen 


1 


¦ 


¦ 


broken vertical bar 


§ 


§ 


§ 


section 




¨ 


¨ 


spacing diaeresis 


© 


© 


© 


copyright 




ª 


ª 


feminine ordinal 
indicator 


« 


« 


« 


angle quotation 
mark (left) 




¬ 


¬ 


negation 




­ 


­ 


soft hyphen 


® 


® 


® 


registered trade- 
mark 




¯ 


¯ 


spacing macron 


0 


8c#176; 


&degr 


degree 


+ 


± 


Siplusmn; 


plus- or- min us 
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CHARACTER 


ENTITY 
NUMBER 


ENTITY NAME 


DESCRIPTION 


2 


² 


² 


superscript 2 


3 


³ 


³ 


superscript 3 


1 


´ 


´ 


spacing acute 


U 


µ 


µ 


micro 


! 


¶ 


¶ 


paragraph 




· 


· 


middle dot 




¸ 


¸ 


spacing cedilla 


l 


OCTT 1 O Jy 


$£supl ^ 


superscript 1 


o 


(JLTT lOU) 




indicator 


» 


» 


» 


angle quotation 
mark (right) 




¼ 


&fracl4; 


fraction 1/4 


Vz 


½ 


&fracl2j 


fraction 1/2 


3/4 


¾ 


¾ 


fraction 3/4 


'<. 


¿ 


¿ 


inverted question 
mark 


X. 


× 


× 


multiplication 




÷ 


÷ 


division 



ISO 8859-1 Characters 



CHARACTER 


ENTITY 
NUMBER 


ENTITY NAME 


DESCRIPTION 


A 


À 


À 


capital a, grave 
accent 


A 


Á 


SiAacute; 


capital a, acute 
accent 


A 


Â 


SiAcirc; 


capital a, circum- 
flex accent 


A 


Ã 


Ã 


capital a, tilde 


A 


Ä 


Ä 


capital a, umlaut 
mark 


A 


Å 


Å 


capital a, ring 


JE 


Æ 


Æ 


capital ae 


9 


Ç 


Ç 


capital c, cedilla 
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CHARACTER 


ENTITY 

VH U1YJ_DJ_jIX 


ENTITY NAME 


DESCRIPTION 


E 


È 


È 


capital e, grave 

accent 




É 


SiEacute; 


capital e, acute 


£ 


&#202, 


Ê 


capital e, circum- 

11C A iitCCClLL 


E 


Ë 


Ë 


capital e, umlaut 
mark 


1 


Ì 


Ì 


capital i, grave 
accent 


r 


Í 


Silacute; 


capital i, acute 

y -1 r -1 n +- 

M. *w £11 L 


I 


Î 


Î 


capital i, circumflex 


i 


/Vi(?n7- 




capital 1) umlaut 
mark 


£) 




OL J_- 1 L 1 j 


C-rtLJl Ldl CL11) lt,C — 

landic 


N 


tJt-TT ijV y j. 




t^apildll 11) LlltLC 


0 


Ò 


&0 graven 


capital o, grave 

i.-tt v CI I L 




LX tr 111, 


OC LI LC j 


accent 




Rr*71 "1. 
CC.TTIl _ n 


ocvj circ^ 


capital o, circum- 
flex accent 


0 


Õ 


Õ 


capital o, tilde 


o 




BtAtJ 111 111, 


t-nrilJl Lttl Uj UllllcLLlL 

mark 


(71 


OC.TrZ.10) 


oc^jsiasrii 


capital Oj slash 




Ù 


Ù 


capital u, grave 

a n 1~ 
t-tLt CI I L 


u 


Ú 


Ú 


capital u, acute 
accent 




&#219, 


SiUcirc; 


capital u, circum- 
flex accent 


u 


&#220, 


MJuml; 


capital u, umlaut 
mark 
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CHARACTER 


ENTITY 

NTTTMRPR 

IN LJlVlXjlLIX 


ENTITY NAME 


DESCRIPTION 


Y 


Ý 


Ý 


capital y, acute 


* 


Þ 


Þ 


capital THORN, 


& 


ß 


Siszlig; 


small sharp s, Ger- 


a 


à 


Siagrave; 


small a, grave 

■~h r -1 r -1 *=k r* 1~ 

ttt t till 


a 




— 

txaaCUte, 


small a, acute 
accent 




wt/rT .. . . - 1 ' . 




accent 


i 


ã 


&afllde; 


small a, tilde 


a 


ä 


ä 


small a, umlaut 
mark 


a 


&#229i 


å 


small a, ring 


se 


æ 


Siaelig; 


small ae 


9 


tX.Tr X , 




SlllcLll CtXllllrt 


e 


è 


è 


small e, grave 

dt,t-Cl I L 


e 


é 


Sieacute; 


small e, acute 
accent 


e 


ê 


ê 


small e, circumflex 

Jit-t-C J L L 


e 


ë 


ë 


small e, umlaut 


1 


ì 


Sdgrave; 


small i, grave 
accent 


i 


&#237i 


í 


small i, acute 
accent 




GXJT O ) 


X/'lf 1 ! IT' 


c m oil 1 f \ r/ -1 1 1 m rl f*v 
ill (.till lj dlCLIlllllCX 

accent 


« 


ï 


ï 


small i, umlaut 
mark 


d 


ð 


ð 


small eth, Icelandic 


6 


&#24l; 


Sintilde; 


small n, rilde 


6 


ò 


Siograve; 


small o, grave 
accent 
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CHARACTER 


ENTITY 


ENTITY NAME 


DESCRIPTION 




ó 


OLUdLC LI LC j 


CI 'ill f\ Iflltf* 

accent 


0 




tX_Ut Jit . 


C m "ill f\ j -1 1 ^~ii 1 l~Y~i rl ov 

Mild 11 \J t VirLLllIlllCA. 

accent 


6 


õ 


&o tilde; 


small o, tilde 


0 




f\^f\ 1 1 rvi 1 " 


v t^i'k oil t"\ 11 111 1 d 1 1 T 

MIld-11 Uj UHllciLlL 

mark 


0 




&£oslash; 


small o, slasli 


Q 


ù 


ù 


small li, grave 

dW_t,Cll L 


U 


ú 


ú 


small u, acute 

L-tL t- C J 1 L 


a 


&#25h 


û 


small u, circumflex 
accent 


ii 


ü 


ü 


small u, umlaut 


1 


ý 


ý 


small y, acute 
accent 




þ 


þ 


small thorn, Ice- 
landic 


y 


ÿ 




small y, umlaut 
mark 
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APPENDIX H 

HTML SYMBOL 
ENTITIES REFERENCE 



This entity reference includes mathematical symbols, Greek characters, various 
arrows, technical symbols, and shapes. 



Entity names are case sensitive. 



Math Symbols Supported by HTML 



CHARACTER 


ENTITY 
NUMBER 


ENTITY NAME 


DESCRIPTION 


V 


∀ 


Morall; 


for all 


3 


∂ 


∂ 


part 


3 


∃ 


&exists; 


exists 


0 


∅ 


6f empty; 


empty 


V 


∇ 


∇ 


nabla 




∈ 


∈ 


isin 


4 


∉ 


∉ 


notin 




∋ 


∋ 


ni 


n 


∏ 


∏ 


prod 


z 


∑ 


∑ 


sum 




− 


− 


minus 


* 


∗ 


∗ 


lowast 


v' 


√ 


√ 


square root 


cc 


∝ 


∝ 


proportional to 


00 


∞ 


∞ 


infinity 


z 


∠ 


∠ 


angle 
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CHARACTER 


ENTITY 
NUMBER 


ENTITY NAME 


DESCRIPTION 


A 


∧ 


∧ 


and 


V 


∨ 


∨ 


or 


n 


∩ 


&cap,* 


cap 


u 


∪ 


∪ 


cup 


J 


∫ 


∫ 


integral 




∴ 


∴ 


therefore 


- 


∼ 


∼ 


similar to 




≅ 


≅ 


congruent to 


: ~ ; 


≈ 


≈ 


almost equal 




≠ 


≠ 


not equal 


= 


≡ 


≡ 


equivalent 


& 


≤ 


≤ 


less or equal 


2s 


≥ 


≥ 


greater or equal 


C 


⊂ 


⊂ 


subset of 




⊃ 


⊃ 


superset of 




⊄ 


⊄ 


not subset of 


c 


⊆ 


⊆ 


subset or equal 




⊇ 


⊇ 


superset or equal 


* 


&#88.53; 


⊕ 


circled plus 


® 


⊗ 


⊗ 


circled times 


1 


⊥ 


⊥ 


perpendicular 




⋅ 


⋅ 


dot operator 



Greek Letters Supported by HTML 



CHARACTER 


ENTITY 
NUMBER 


ENTITY NAME 


DESCRIPTION 


A 


&#913 




Α 


Alpha 


B 


&#914 




Β 


Beta 


r 


&#915 




Γ 


Gamma 


A 


&#916 




Δ 


Delta 


E 


&#917 




Ε 


Epsilon 


Z 


Ζ 


Ζ 


Zeta 
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CHARACTER 


ENTITY 
NUMBER 


ENTITY NAME 


DESCRIPTION 


H 


&#919 




Η 


Eta 


© 


&#920 




Θ 


Theta 


1 


&#921 




Ι 


Iota 


K 


&#922 




Κ 


Kappa 


A 


&#923 




Λ 


Lambda 


M 


&#924 




Μ 


Ma 


N 


&#925 




Ν 


Nu 


= 


&#926 




Ξ 


Xi 


0 


&#927 




&O micron; 


Omicron 


n 


&#928 




Π 


Pi 


p 


&#929 




Ρ 


Rlio 




undefined 




Signiaf 


z 


&#931 




Σ 


Sigma 


T 


&#932 




Τ 


Tau 


Y 


&#933 




&Upsilon,* 


Upsilon 




&#934 




Φ 


Phi 


X 


&#935 




MMi 


Chi 




&#936 




Ψ 


Psi 


D 


&#937 




Ω 


Omega 










a 


&#945 




Sialpha; 


alpha 


P 


&#946 




β 


beta 


V 


&#947 




γ 


gamma 


5 


&#948 




δ 


delta 


E 


&#949 




ε 


epsilon 


5 


&#950 




ζ 


zeta 


n 


&#951 




η 


em 


e 


&#952 




θ 


theta 


i 


&#953 




ι 


iota 


K 


&#954 




κ 


kappa 


A 


8c#955 




λ 


lambda 


M 


&#956 




μ 


mu 


V 


&#9>7 




ν 


nu 
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CHARACTER 


ENTITY 
NUMBER 


ENTITY NAME 


DESCRIPTION 




ξ 


ξ 


xi 


0 


ο 


&o micron; 


omicron 


TT 


π 


π 


pi 


P 


ρ 


ρ 


rho 


s 


ς 


ς 


sigmaf 


a 


σ 


σ 


sigma 


T 


τ 


Saau; 


tau 


U 


υ 


υ 


upsilon 


<j> 


φ 


φ 


phi 


X 


χ 


χ 


chi 


m 


ψ 


ψ 


psi 


U) 


ω 


Iomega; 


omega 




ϑ 


Sithetasym; 


theta symbol 


r 


ϒ 


Sfupsih; 


upsilon symbol 


UJ 


ϖ 


ϖ 


pi symbol 



Other Entities Supported by HTML 



CHARACTER 


ENTITY 
NUMBER 


ENTITY NAME 


DESCRIPTION 


CE 


Œ 


Œ 


capital ligature OE 




œ 


œ 


small ligature oe 


S 


Š 


&S caron; 


capital S with caron 


s 


š 


š 


small S with caron 


Y 


Ÿ 


Ÿ 


capital Y with 
diaeres 


/ 


ƒ 


&fnofi 


f with hook 




ˆ 


ˆ 


modifier letter 
circumflex accent 




˜ 


˜ 


small tilde 




  


  


en space 




  


  


em space 




  


  


thin space 




‌ 


‌ 


zero width non- 
joiner 
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CHARACTER 


ENTITY 
NUMBER 


ENTITY NAME 


DESCRIPTION 




&#8205 






zero width joiner 




&#8206 




&drm; 


left-to-right mark 




&#8207 




&rhn; 


right-to-left mark 


- 


&#8211 




– 


en dash 




&#8212 




S£nidasli» 


em dash 


t 


&#8216 




‘ 


left single quota- 

LIU 11 I llcLl ri_ 




’ 


’ 


right single quota- 

LIU 11 1 11 -AI IV 






Sfsbquo; 


single low-9 quota- 
tion mark 


a 


“ 


“ 


left double quota- 

LIU 11 111dm 


„ 


” 


I'fl n 1 1 f\ ' 

CX.I UUUUJ 


UVUL UU ULJlC UUULd. - 

tion mark 


n 


„ 


„ 


double low-9 quo- 
tation mark 


f 


&J#8224; 


† 


dagger 




‡ 


‡ 


double dagger 


• 


• 


• 


bullet 




… 


… 


horizontal ellipsis 




‰ 


‰ 


per mille 


i 


′ 


′ 


minutes 


tt 


&*8243; 


Ot 1 111 11C ! 


SCLUIltli 




‹ 


^vltVUjn 1 1 f\ ' 

wClldXJ LIU) 


sllltLlt 1C1 L dLllt^lC 

quotation 


> 


› 


› 


single right angle 
quotation 


— 


‾ 


‾ 


overline 


€ 


€ 


€ 


euro 


TM 


™ 


™ 


trademark 




← 


← 


left arrow 


T 


↑ 


↑ 


up arrow 




→ 


&£rarr; 


right arrow 


i 


↓ 


↓ 


down arrow 
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k . I 1 /\ I\; \^ / 1 1. 1\ 


PNTTTTV 

l^LN 1111 

NUMBER 


FMTITVN4MP 

IjlN 1111 IN/VlVl-Ci 


l_^IlL)v_/rvll 1 1VJ1N 


<— > 


↔ 


↔ 


left right arrow 




↵ 


↵ 


carriage return 
arrow 


I 


&#8968 




⌈ 


left ceiling 


1 


&#8969 




⌉ 


right ceiling 


L 


&#8970 




⌊ 


left floor 


J 


&#8971 




⌋ 


right floor 


0 


&#9674 




◊ 


lozenge 




&#9824 




tepades; 


spade 




&#9827 




♣ 


club 




&#9829 




Sihearts; 


heart 


♦ 


&#9830 




♦ 


diamond 
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APPENDIX I 



HTML URL 
ENCODING 
REFERENCE 



URL encoding converts characters into a format that can be safely transmitted over 
the Internet. 

Web browsers request pages from Web servers by using a URL. The URL is the 
address of a Web page like: http://www.w3schools.com. 

For more information, see Chapter 27, "URL Encoding. 1 ' 




URL Encoding 

URLs can only be sent over the Internet using the ASCII character set. 

Because URLs often contain characters outside the ASCII set, the URL has to 
be converted. URL encoding converts the URL into a valid ASCII format. URL 
encoding replaces unsafe ASCII characters with "%" followed by two hexadecimal 
digits corresponding to the character values in the ISO-8859-1 character set. 



L 



NOTE 



URLs cannot contain spaces. URL encoding normally replaces a space 
with a + sign. 



^ For more about ASCII, see Appendix F, "HTML ASCII Reference: 



For more about ISO characters, see Appendix G, "HTML ISO-8859-1 
Reference." 
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URL Encoding Functions 

In JavaScript, PHP, and ASP there are functions that can be used to URL encode 
a string. 

In JavaScript you can use the encodeURlQ function. PHP has the rawurlen- 
codeQ function and ASP has the Server.U RLE n code C) function. 




To learn more about programming events, please read Learn JavaScript 
andAjax with w3schoois, also from Wiley Publishing, or visit the JavaS- 
cript tutorial atwww.w3schools.com/js. 



NOTE 



In the following table, some numbers remain unassigned. 



URL Encodinq Reference 



jtLJvjII ^TIJlTV/i.V_v 1 HJ\. 






%20 




%21 




%22 


# 


%23 


$ 


%24 


% 


%25 


& 


%26 




%27 


( 


%28 


) 


%29 


* 


%2A 


+ 


%2B 




%2C 




%2D 




%2E 


/ 


%2F 


0 


%30 


1 


%31 


2 


%32 


3 


%33 
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ASCn CHARACTER 


URL-ENCODING 


4 


%34 


5 


%35 


6 


%36 


7 


%37 


8 


%38 


9 


%39 




%3A 


; 


%3B 


< 


%3C 


= 


%3D 


> 


%3E 


> 


%3F 


@ 


%40 


A 


%41 


B 


%42 


C 


%43 


D 


%44 


E 


%45 


F 


%46 


G 


%47 


H 


%48 


I 


%49 


J 


%4A 


K 


%4B 


L 


%4C 


M 


°/o4D 


N 


%4E 


O 


%4F 


P 


%50 


Q 


%51 


R 


%52 


S 


%53 


T 


%54 


U 


%55 
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ASCn CHARACTER 


URL-ENCODING 


V 


%56 


w 


%57 


X 


%58 


Y 


%59 


Z 


%5A 


[ 


%5B 


\ 


%5C 


] 


%5D 


A 


%5E 





%5F 




%60 


a 


%61 


b 


%62 


c 


%63 


t 


%64 


e 


%65 


f 


%66 


g 


%67 


h 


%68 


i 


%69 


i 


%6A 


k 


%6B 


1 


%6C 


m 


%6D 


n 


%6E 


0 


%6F 


P 


%70 


q 


%71 


r 


%72 


s 


%73 


t 


%74 


Ll 


%75 


V 


%76 


w 


%77 
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ASCH CHARACTER 


URL-ENCODING 




%78 


y 


%79 


z 


%7A 


i 


%7B 




%7C 


} 


%7D 


- 


%7E 




%7F 


€ 


%80 




%81 


i 


%82 


/ 


%83 


» 


%84 




%85 


t 


%86 


t 


%87 


a 


%88 


%0 


%89 


s 


%8A 


( 


%8B 


CE 


%8C 




%8D 


2 


%8E 




%8F 




%90 




%91 




%92 


« 


%93 


jj 


%94 


m 


%95 




%96 




%97 




%98 


TM 


%99 
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ASCn CHARACTER 


URL-ENCODING 


s 


%9A 


> 


%9B 




%9C 




%9D 


¥ 

z 


%9E 


Y 


%9F 




%A0 


i 


%A1 


4 


%A2 


£ 


%A3 




%A4 


¥ 


%A> 




%A6 




%A7 




%A8 


© 


%A9 




%AA 




%AB 




%AC 


- 


%AD 


® 


%AE 


- 


%AF 




%B0 


± 


%B1 


2 


%B2 


3 


%B3 


' 


%B4 




%B5 


! 


%B6 




%B7 


i 


%B8 


1 


%B9 


O 


%BA 


» 


%BB 
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ASCn CHARACTER 


URL-ENCODING 


14 


%BC 


Vi 


%BD 


% 


%BE 


t 


%BF 


A 


%C0 


A 


%C1 


A 


%C2 


A 


%C3 


A 


%C4 


A 


%C5 


& 


%C6 




%C7 


E 


%C8 




%C9 


£ 


%CA 


E 


%CB 


I 


%CC 


I 


wcm 


I 


%CE 


I 


%CF 


D 


%D0 


1ST 


%D1 


0 


%D2 


0 


%D3 


0 


%D4 


o 


%D5 


0 


%D6 




%D7 


0 


%D8 


fj 


%D9 


tJ 


%DA 




%DB 


u 


%DC 


f 


%DD 
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ASCn CHARACTER 


URL-ENCODING 


r> 


%DE 


8 


%DF 


a 


%E0 


a 


%E1 


a 


%E2 


a 


%E3 


a 


%E4 


3 


%E5 


ae 


%E6 


S 


%E7 


b 


%E8 


e 


%E9 


e 


%EA 


c 


%EB 


i 


%EC 


i 


%ED 


i 


%EE 


I 


%EF 




%F0 


n 


%F1 


6 


%F2 


6 


%F3 


6 


%F4 


6 


%F5 


6 


%F6 


+ 


%F7 


0 


%F8 


Ll 


%F9 


d 


%FA 


u 


•••IT. 


u 


%FC 


y 


%FD 




%FE 


7 


%FF 
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Symbols 

<!-...->, 177, 181 

A 

<a> element, 47 

<a> tag, 11, 17, 157, 177, 182, 189 
</a> tag, 13 

<abbr> tag, 38, 177, 181, 189 
abbreviations, formatting, 32 
accesskey attribute, 164, 186 
<acronym> tag, 38, 177, 181, 189 
acronyms, formatting, 32 
action attribute, 106 
<address> tag, 38, 177, 181, 189 
addresses, formatting, 31 
<a href="default.htm"> tag, 13 
align attribute, 12 
aligning images, 59—60 
alignment 

cell content, 82-83 

text, 43-44 
alt attribute, 63 

ampersand, character entity, 149 
anchors, links, 47, 49, 117 
<applet> tag, 162, 178, 184, 189 
<area> tag, 178, 182, 189 
ASCII characters, 193, 196-200 

device control characters, 199-200 

printable characters, 196-199 
attributes, 11-13, 17-18 

accesskey, 164, 186 

action, 106 

align, 40, 44, 82 

alt, 63 

bgcolor, 40-41 
border, 68, 70, 88-89 
class, 18, 163, 185 
color, 20 
<content>, 155 
core, 163, 185 
dir, 163, 186 

event, 165-166, 187-188 
fonts, 137 
frame, 84-89 
height, 62 



href, 157 
id, 18, 163, 185 
keyboard, 164, 186 
lang, 163, 186 
language, 163, 186 
lowercase, 18 
<name>, 155 
name/value pairs, 17 
onabort, 188 
onblur, 166, 187 
onchange, 166, 187 
onclick, 166, 188 
ondblclick, 166, 188 
onfocus, 166, 187 
onkeydown, 166, 188 
onkeypress, 166, 188 
onkeyup, 166, 188 
onload, 165, 187 
onmousedown, 166, 188 
onmousemove, 166, 188 
onmouseout, 166, 188 
onmouseover, 166, 188 
onmouseup, 166, 188 
onreset, 166, 187 
onselect, 166, 187 
onsubmit, 166, 187 
onunload, 165, 187 
quotation marks, 17 
src, 55 

standard, 17-18, 163-164, 185-186 

style, 18, 39-44, 143, 146, 163, 185 

tabindex, 164, 186 

tag reference, 22 

target, 46, 48 

title, 18, 163, 185 

type, 91, 93 

unknown, 155 

values, defining, 17-18 

width, 62 

B 

<b> tag, 36, 178, 181, 189 
background colors, 41-42 

cells, 82 

tables, 80-81 
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background images, 58 

cells, 82 

tables 80-81 
<base> tag, 150, 152-153, 178, 183, 189 
<basefont> tag, 40, 146, 178, 183, 189 
<bdo> tag, 38, 178, 181, 189 
<big> tag, 36, 178, 181 
<blockquote> tag, 38, 178, 181, 190 
<body> element, 14-15, 41 
</body> tag, 2,15 

<body> tag, 2, 15, 126, 178, 180, 190 
bold text, 20 

formatting, 27-28 
border attribute, 68, 70, 88-89 
borders 

frames, resizing, 128 

tables, 68-71, 84-89 
<br> element, 16, 24 
<br /> tag, 13, 24, 178, 181, 190 
brackets, 21 
browsers 

knowledge, 1 

older, 161 

support, colors, 113 
windows, links, 46 
bullets, 90-91 

<button> tag, 110, 178, 182, 190 
buttons, 104-105, 107-109 
buttons, radio, 102, 108-109 

c 

captions, tables, 74-75 
<caption> tag, 89, 178, 183, 190 
case sensitivity, 1 8 
cells, 75-76 

background colors, 82 

background images, 82 

content, alignment, 82-83 

empty, 72-74 

padding, 78-79 

spacing, 79-80 
cent, character entity, 149 
<center> tag, 40, 146, 178, 181, 190 
character entities, 147-149 
character sets, 193-195 

ASCII characters, 193 

ISO characters, 194-195 

ISO-8859-1 characters, 193 

Unicode characters, 195 
character widths, formatting, 29 



checkboxes, 101, 107-108 
citation tags, 38 

<cite> tag, 36, 38, 178, 181, 190 
class attribute, 18, 163, 185 
closing tags, 13, 16 
code, source, 22 

<code> tag, 36-37, 178, 181, 190 
<col> tag, 89, 178, 183, 190 
<colgroup> tag, 89, 178, 183, 190 
color 

background 41-42 

browser support, 113 

font, 42-43, 138-139 

gray shades, 114—115 

hexadecimal notation, 1 1 1—112 

names, standard, 113 

RGB, 1 1 1 

values, 111-112 

Web Safe Colors, 114 
Color Picker, 8 
column sizes, frameset, 128 
comments, 21 
computer output tags, 30 
<content> attribute, 155 
copyright, character entity, 149 
core attributes, 185 
CSS styles, 142-146 

<basefont> tag, 146 

<center> tag, 146 

<div> tag, 146 

external style sheet, 144 

<font> tag, 146 

<head> section, 142-143 

inline styles, 146 

internal style sheets, 145 

<link> tag, 144, 146 

links, underlined, 143 

<span> tag, 146 

style attribute, 143, 146 

style sheets, external, 144-145 

style sheets, internal, 145 

style sheets, linked, 144 

<sryle> tags, 145-146 

D 

<dd> tag, 95-96, 98, 178, 183, 190 
definition lists, 95-96, 118 
definition tags, 38 
<del> tag, 36, 178, 181, 190 
deleted text, 35 
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deprecated tags, 36, 40 

device control characters, ASCII, 199-200 

<dfn> tag, 36, 38, 178, 181, 190 

dir attribute, 163, 186 

<dir> tag, 98, 178, 183, 190 

<div> tag, 146, 178, 183, 190 

<dl> tag, 95, 98, 178, 183, 190 

doctypes, 189-192 

<!DOCTYPE> tag, 153, 177, 180 

documents, basic, 2, 116 

domain, URLs, 157 

downloading, ftp, 158 

Dreamweaver, 7 

drop-down lists, 102-103 

<dt> tag, 95, 98, 178, 183, 190 

E 

editors, 7 
elements, 13-16 

<address>, 119 

anchors, 117 

<blockquote>, 119 

<body>, 41 

doctypes, 189-192 

empty, 16 

end tags, 1 5 

forms, 99 

head element, 150-153 

<base> tag, 150, 152-153 

<!DOCTYPE> tag, 153 

<head> tag, 153 

<link> tag, 150, 153 

<meta> tag, 150, 153 

<p> element, 151 

<script> tag, 150 

<style> tag, 150 

tags, 150-153 

<title> tag, 150-151, 153 
headings, 116 
image, 117 
links, 117 
lowercase tags, 16 
meta, 153-156 

<content> attribute, 155 

keywords, 154—155 

<name> attribute, 155 

search engines, 154-155 

unknown attributes, 155 

user redirection, 155-156 
nested, 14 



<p>, 42, 151 
<tbody>, 74 
<tfoot>, 74 
text, 116 
<thead>, 74 
syntax, 13 

within elements, 76—77 
<em> tag, 36, 178, 181, 190 
e-mail addresses, links, 52—53 
e-mails, forms, 109-110 
emphasized text, 28 
empty cells, 72-74 
empty elements, 16 
empty lines, 20, 23 
encoding, URLs, 167-168 
end tags, see also closing tags, 14-15, 23 
entities, 119 

euro, character entity, 149 

event attributes, 165-166, 187-188 

body events, 187 

form element events, 166, 187 

frameset events, 187 

image events, 188 

keyboard events, 166, 188 

mouse events, 166, 188 

window events, 165 
exclamation points, 21 
extensions, 8 
external links, 45—46 
external style sheet, 144 
extra lines, 24-26 
extra spaces, 24-26 

F 

families, fonts, 42—43 

<fieldset> tag, 110, 178, 182, 190 

fieldset, 105 

file extensions, 8 

file validation, 141 

filenames, URLs, 158 

floating images, 61 

fonts, 136-139 

attributes, 137 

color, 42-43, 138-139 

controlling, 137-139 

families, 42—43 

size, 42-43, 138-139 

styles, 137-139 

style sheets, 139 
<font> tag, 40, 136-139, 146, 178, 181, 190 
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form element events, 166 

<form> tag, 100, 110, 178, 182, 190 

formatting, text, 27-38 

abbreviations, 32 

addresses, 31 

acronyms, 32 

<b> tag, 27 

bold text, 27-28 

character widths, 29 

citation tags, 38 

computer output tags, 30 

definition tags, 38 

deleted text, 35 

deprecated tags, 36 

emphasized text, 28 

<i> tag, 27 

inserted text, 35 

italic text, 27-28 

line breaks, 29 

phrase tags, 36 

preformatted text, 29 

quotations, 34, 38 

spaces, 29 

strikethrough 35, 35 
subscript text, 28 
superscript text, 28 
tags, 27, 36 
text direction, 33 
underscore text, 35 
forms, 99-110, 118-119 
action attribute, 106 
<button> tag, 110 
buttons, 104-105, 107-109 
checkboxes, 101, 107-108 
drop-down lists, 102-103 
elements, 99 

e-mails, sending, 109-110 
<fieldset> tag, 105, 110 
<form> tag, 100, 110 
<input> tag, 100, 110 
<isindex> tag, 110 
<legend> tag, 110 
<optgroup> tag, 110 
<option> tag, 110 
pages, adding, 106-107 
radio buttons, 102, 108-109 
<select> tag, 110 
<textarea> tag, 110 
textarea input control, 104 
text areas, 104 



text fields, 100-101 
frame attribute, 84-89, 188 
frames, 125-135 

borders, resizing, 128 

column sizes, 128 

disadvantages, 125 

<frame> tag, 127-128, 135 

<frameset> tag, 125-127, 135 
horizontal frameset, 126—127 
vertical frameset, 125—126 

<iframe> tag, 135 

inline, 132-133 

jump to, 133-134 

jump to sections, 134-135 

mixed frameset, 130 

navigation, 131-132, 135 

<noframes> tag, 128-129, 135 

noresize attribute, 131 

sections, jumping to, 134-135 
<frame> tag, 127-128, 135, 179, 182, 190 
<frameset> tag, 125-127, 135, 190 

horizontal frameset, 126-127 

vertical frameset, 125-126 
FrontPage, 7 
fundamentals, 9-12 

headings, 9-10 

images, 1 1—12 

links, 1 1 

paragraphs, 10 

G 

gray shades, 1 14—1 1 5 

greater than, character entity, 149 

Greek symbols, 208-210 

H 

<hl> tag, 2, 9, 19, 179, 181, 190 
<h6> tag, 9, 19, 179, 181, 190 
head element, 150-153 

<base> tag, 150, 152-153 

<!DOCTYPE> tag, 153 

<head> tag, 153 

<link> tag, 150, 153 

<meta> tag, 150, 153 

<p> element, 151 

<script> tag, 150 

<style> tag, 150 

tags, 150-153 

<title> tag, 150-151, 153 
<head> section, 142-143 
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Index 



<head> tag, 153, 179, 183, 190 
headings, 9-10, 19-20 

elements, 116 

tables, 71-72 
height attribute, 62 
hexadecimal notation, 1 1 1—112 
horizontal frameset, 126-127 
horizontal rules, 20 
host, URLs, 157 
href attribute, 47, 49, 157 
<hr /> tag, 20, 179, 181, 190 
HTM extension, 8 
HTML, defined, 1 
HTML 3.2, 140 
HTML 4.0, 140-141 
HTML Color Picker, 8 
HTML editors, 7 
<html> element, 15 
HTML extension, 8 
<html> tag, 2, 15, 179-180, 190 
hyperlinks, 47 

I 

<i> tag, 36, 179, 181, 190 
id attribute, 18, 163, 185 
<iframe> tag, 135, 179, 182, 190 
IIS, see Internet Information Server 
image maps, 63-64 
images, 11-12, 55-64, 117 

aligning, 59-60 

alt attribute, 63 

background, 58 

floating, 61 

height attribute, 62 

<img> tag, 55-56 

inserting, 57 

links, 54-55 

maps, 63-64 

scaling, 62 

src attribute, 55 

size, adjusting, 62 

width attribute, 62 
<img> tag, 11, 55-56, 179, 182, 190 
inline frames, 132-133 
inline styles, 146 

<input> tag, 100, 110, 179, 182, 190 
<ins> tag, 36, 179, 181, 190 
inserted images, 57 
inserted text, 35 
internal links, 45-46 



internal style sheets, 145 
Internet Explorer, 2 

Internet Information Server (IIS), 169-171 
<isindex> tag, 110, 179, 182 
ISO characters, 194-195 
ISO-8859-1 characters, 193, 201-206 

reserved characters, 201-202 

symbols, 202-203 
italic text, 27-28 

J 

jump to frameset, 133-134 
jump to sections, 134-135 

K 

<kbd> tag, 36-37, 179, 181, 191 
keyboard attributes, 186 
keyboard events, 166 
keywords, 154-155 

L 

<label> tag, 179, 182, 191 
language attribute, 163, 186 
layout, tables, 123-124 

<table> tag, 123 
<Iegend> tag, 1 10, 179, 182, 191 
less than, character entity, 149 
<li> tag, 91, 93, 98, 179, 183, 191 
line breaks, 10, 24, 29 
lines, see rules 
lines 

empty, 20, 23 

extra, 24-26 
<link> tag, 144, 146, 150, 153, 179, 182, 191 
links, 11,45-54, 117 

<a> element, 47 

anchors, 47, 49 

browser windows, 46 

e-mail addresses, 52-53 

external, 45-46 

href attribute, 47, 49 

hyperlinks, 47 

images, 54—55 

internal, 45-46 

mailto:, 52-53 

name attribute, 49 

opening, 46 

same page, 50—51 

start tag, 47 

subfolder references, 49 
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syntax, 47 

target attribute, 46, 48 

underlined, 143 

URLs, 158-159 
<listing> tag, 37 
lists, 90-98 

bullets, 90-91 

<dd> tag, 95-96, 98 

definition, 95-96, 118 

<dir> tag, 98 

<dl> tag, 95, 98 

<dt> tag, 95, 98 

<li> tag, 91, 93, 98 

<menu> tag, 98 

nested, 96-98 

<ol> tag, 93, 98 

ordered, 93, 117 

type attribute, 9 1 , 93 

<ul> tag, 91, 98 

unordered, 90-92, 117 
logical styles, 117 
lowercase attributes, 18 
lowercase tags, 16 

M 

mailto: links, 52-53 

maps, image, 63-64 

<map> tag, 179, 182, 191 

markup tags, 8 

math symbols, 207-208 

<menu> tag, 98, 179, 183, 191 

meta element, 153-156 
<content> attribute, 155 
keywords, 154-155 
<name> attribute, 155 
search engines, 154—155 
unknown attributes, 155 
user redirection, 155—156 

<meta> tag, 150, 153, 179, 183, 191 

mixed frameset, 130 

mouse events, 166 

Mozilla Firefox, 2, 72 

N 

name attribute, 49, 155 
names, standard, 113 
name/ value pairs, 17 
navigation frame, 131-132, 135 
nested elements, 14 

<body> element, 14—15 



<html> element, 15 

<p> element, 14 
nested lists, 96-98 
newsgroups, accessing, 158 
<noframes> tag, 128-129, 135, 179, 182, 191 
nonbreaking spaces, 73, 148 
noresize attribute, frameset, 131 
<noscript> tag, 162, 179, 184, 191 
Notepad, 7-8 

o 

<object> tag, 162, 179, 184, 191 
<ol> tag, 93, 98, 179, 182, 191 
onabort attribute, 188 
onblur attribute, 166, 187 
onchange attribute, 166, 187 
onclick attribute, 166, 188 
ondblclick attribute, 166, 188 
onfocus attribute, 166, 187 
onkeydown attribute, 166, 188 
onkeypress attribute, 166, 188 
onkeyup attribute, 166, 188 
onload attribute, 165, 187 
onmousedown attribute, 166, 188 
onmousemove attribute, 166, 188 
onmouseout attribute, 166, 188 
onmouseover attribute, 166, 188 
onmouseup attribute, 166, 188 
onreset attribute, 166, 187 
onselect attribute, 166, 187 
onsubmit attribute, 166, 187 
onunload attribute, 165, 187 
opening links, 46 
opening tags, 13 

<optgroup> tag, 110, 179, 182, 191 
<option> tag, 1 10, 179, 182, 191 
ordered, 93, 117 
output, paragraphs, 24—25 

P 

<p> element, 14, 42, 151 

<p> tag, 2, 13, 23, 179, 181, 191 

padding, cells, 78-79 

page links, 50-51 

pages, adding to forms, 106—107 

pages, scripts, 160 

paragraphs, 10, 23-26 

end tags, 23 

line breaks, 24 

output, 24-25 
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<param> tag, 162, 179, 184, 191 
path, URLs, 158 

Petsonal Web Server (PWS), 170-172 

phrase tags, 36 

physical styles, 117 

<plaintext> tag, 37 

:port, URLs, 157 

pound, character entity, 149 

<pre> tag, 37, 179, 181, 191 

preformatted text, 29 

primes, 17 

printable characters, ASCII, 196-199 
professional Web servers, 172 
PWS, see Personal Web Server 

Q 

<q> tag, 38, 180-181, 191 
quizzes, 8 

quotation marks, attributes, 17 
quotations, formatting, 34, 38 

radio buttons, 102, 108-109 
registered trademark, character entity, 149 
reserved characters, ISO-8859-1, 201-202 
RGB, 1 1 1 
rules, 20-21 



<s> tag, 36, 40, 180-181, 191 
<samp> tag, 36-37, 180-181, 191 
scaling images, 62 
schemes, URLs, 157-158 
scripts, 160-162 

<applet> tag, 162 

browsers, 161 

<noscript> tag, 162 

<object> tag, 162 

pages, inserting, 160 

<param> tag, 162 

<script> tag, 160-162 

tags, 162 

<script> tag, 150, 160-162, 180, 184, 191 

search engines, 20, 154-155 

section, character entity, 149 

sections, jumping to, 134-135 

<select> tag, 1 10, 180, 182, 191 

size 

fonts, 42-43, 138-139 
images, 62 



<small> tag, 36, 180-181, 191 
slashes, subfolder references, 49 
source code, 22 
source names, 12 
source sizes, 12 
spaces, 10, 24-26, 29 
spacing, cells, 79-80 
<span> tag, 146, 180, 183, 191 
src attribute, 55 

standard attributes, 17-18, 185-186 

start tags, see also opening tags, 13-14, 47 

<strike> tag, 36, 40, 180-181, 191 

strikethrough text, 35, 35 

<strong> tag, 36, 180-181, 191 

style attribute, 18, 39-34, 143, 146, 163, 185 

styles, 39-44 

background color, 41-42 
CSS, 142-146 

<basefont> tag, 146 
<center> tag, 146 
<div> tag, 146 
external style sheet, 144 
<font> tag, 146 
<head> section, 142-143 
inline styles, 146 
internal style sheets, 145 
<link> tag, 144, 146 
links, underlined, 143 
<span> tag, 146 
style attribute, 143, 146 
style sheets, external, 144-145 
style sheets, internal, 145 
style sheets, linked, 144 
deprecated tags/attributes, 40 
fonts, 137-139 
fontcolor, 42-43, 138-139 
font family, 42-43 
font size, 42-43, 138-139 
logical, 117 
physical, 117 
style attribute, 39-44 
text alignment, 43-44 
style sheets, 139 

external, 144-145 
internal, 145 
linked, 144 
<style> tag, 145-146. 150, 180, 183, 191 
<sub> tag, 36, 180-181, 191 
<sup> tag, 36, 180-181, 191 
subfolder references, links, 49 
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subscript text, 28 
superscript text, 28 
symbol entities, 207-211 

Greek symbols, 208-210 

math symbols, 207-208 

miscellaneous, 210—21 1 
symbols, ISO-8859-1, 202-203 
syntax, elements, 13 

T 

tabindex attribute, 164, 186 
tables, 118 

align attribute, 82 
background colors, 80—81 
background images, 80-81 
border attribute, 68, 70, 88-89 
borders, 68-71, 84-89 
captions, 74—75 
<caption> tag, 89 
cells, 75-76 

background colors, 82 

background images, 82 

content, alignment, 82-83 

empty, 72-74 

padding, 78-79 

spacing, 79-80 
<col> tag, 89 
<colgroup> tag, 89 
creation, 65-68 

elements within elements, 76—77 
frame attribute, 84-89 
headings, 71-72 
layout, 123-124 
nonbreaking spaces, 73 
table data, 65 
<table> tag, 65-66, 89 
tags within, 76-77 
<tbody> element, 74 
<tbody> tag, 89 
<td> tag, 65-66, 89 
<tfoot> element, 74 
<tfoot> tag, 89 
<th> tag, 71, 89 
<thead> element, 74 
<thead> tag, 89 
<tr> tag, 65-66, 89 
table data, 65 

<table> tag, 65-66, 89, 123, 180, 183, 191 
tags, 177-180 

<!-...->, 177, 181 



<a>, 11, 17, 157, 177, 182, 189 
</a>, 13 

<abbr>, 38, 177, 181, 189 
<acronym>, 38, 177, 181, 189 
<address>, 38, 177, 181, 189 
<a href="default.htm">, 13 
<applet>, 162, 178, 184, 189 
<area>, 178, 182, 189 
<b>, 36, 178, 181, 189 
<base>, 150, 152-153, 178, 183, 189 
<basefont>, 40, 146, 178, 183, 189 
<bdo>, 38, 178, 181, 189 
<big>, 36, 178, 181 
<blockquote>, 38, 178, 181, 190 
</body>, 2, 15 

<body>, 2, 15, 126, 178, 180, 190 
<br/>, 13, 24, 178, 181, 190 
<button>, 110, 178, 182, 190 
<caption>, 89, 178, 183, 190 
<center>, 40, 146, 178, 181, 190 
<cite>, 36, 38, 178, 181, 190 
closing, 13 

<code>, 36-37, 178, 181, 190 
<col>, 89, 178, 183, 190 
<colgroup>, 89, 178, 183, 190 
<dd>, 95-96, 98, 178, 183, 190 
defined, 2 

<del>, 36, 178, 181, 190 

<dfn>, 36, 38, 178, 181, 190 

<dir>, 98, 178, 183, 190 

<div>, 146, 178, 183, 190 

<dl>, 95, 98, 178, 183, 190 

<!DOCTYPE>, 153, 177, 180 

<dt>, 95, 98, 178, 183, 190 

<em>, 36, 178, 181, 190 

end, 14-15,23 

<fieldset>, 110, 178, 182, 190 

<font>, 40, 136-139, 146, 178, 181, 190 

<form>, 100, 110, 178, 182, 190 

formatting, 27, 36 

<frame>, 127-128, 135, 179, 182, 190 

<frameset>, 125-127, 135, 179, 182, 190 

<hl>, 2, 9, 19, 179, 181, 190 

<h6>, 9, 19, 179, 181, 190 

<head>, 153, 179, 183, 190 

head, 150-153 

<hr />, 20, 179, 181, 190 

<html>, 2, 15, 179-180, 190 

<i>, 36, 179, 181, 190 

<iframe>, 135, 179, 182, 190 



228 



<img>, 11, 55-56, 179, 182, 190 

<input>, 100, 110, 179, 182, 190 

<ins>, 36, 179, 181, 190 

<isindex>, 110, 179, 182 

<kbd>, 36-37, 179, 181, 191 

<label>, 179, 182, 191 

<legend>, 1 10, 179, 182, 191 

<li>, 91, 93, 98, 179, 183, 191 

<link>, 144, 146, 150, 153, 179, 182, 191 

<listing>, 37 

lowercase, 16 

<map>, 179, 182, 191 

markup, 8 

<menu>, 98, 179, 183, 191 
<meta>, 150, 153, 179, 183, 191 
<noframes>, 128-129, 135, 179, 182, 191 
<noscript>, 162, 179, 184, 191 
<object>, 162, 179, 184, 191 
<ol>, 93, 98, 179, 182, 191 
opening, 13 

<optgroup>, 110, 179, 182, 191 
<option>, 110, 179, 182, 191 
<p>, 2, 13,23, 179, 181, 191 
<param>, 162, 179, 184, 191 
<plaintext>, 37 
<pre>, 37, 179, 181, 191 
<q>, 38, 180-181, 191 
<s>, 36, 40, 180-181, 191 
<samp>, 36-37, 180-181, 191 
script, 162, 191 

<script>, 150, 160-162, 180, 184 
<select>, 110, 180, 182, 191 
<small>, 36, 180-181, 191 
<span>, 146, 180, 183, 191 
start, 13-14 

<strike>, 36, 40, 180-181, 191 

<strong>, 36, 180-181, 191 

<style>, 145-146. 150, 180, 183, 191 

<sub>, 36, 180-181, 191 

<sup>, 36, 180-181, 191 

<table>, 65-66, 89, 123, 180, 183, 191 

<tbody>, 89, 180, 183, 191 

<td>, 65-66, 89, 180, 183, 191 

<textarea>, 110, 180, 182 

<tfoot>, 89, 180, 183, 192 

<th>, 71, 89, 180, 183, 192 

<thead>, 89, 180, 183, 192 

<title>, 150-151, 153, 180, 183, 192 

<tr>, 65-66, 89, 180, 183, 192 

<tt>, 37, 180-181, 192 



<u>, 36, 40, 180, 182, 192 
<ul>, 91, 98, 180, 182, 192 
<var>, 36-37, 180, 182, 192 
within tables, 76-77 
<xmp>, 37, 180, 182 

target attribute, 46, 48 

<tbody> element, 74 

<tbody> tag, 89, 180, 183, 191 

<td> tag, 65-66, 89, 180, 183, 191 

test Web, 8 

testing, Web servers, 171 
<textarea> tag, 110, 180, 182 
text alignment, 43-44 
text areas, 1 04 
text direction, 33 
text elements, 116 
text fields, 100-101 
text formatting, 27-38 

abbreviations, 32 

addresses, 31 

acronyms, 32 

<b> tag, 27 

bold text, 27-28 

character widths, 29 

citation tags, 38 

computer output tags, 30 

definition tags, 38 

deleted text, 35 

deprecated tags, 36 

emphasized text, 28 

<i> tag, 27 

inserted text, 35 

italic text, 27-28 

line breaks, 29 

phrase tags, 36 

preformatted text, 29 

quotations, 34, 38 

spaces, 29 

strikethrough 35, 35 

subscript text, 28 

superscript text, 28 

tags, 27, 36 

text direction, 33 

underscore text, 35 
textarea input control, 104 
<tfoot> element, 74 
<tfoot> tag, 89, 180, 183, 192 
<th> tag, 71, 89, 180, 183, 192 
<thead> element, 74 
<thead> tag, 89, 180, 183, 192 
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title attribute, 18, 163, 185 

<title> tag, 150-151, 153, 180, 183, 192 

<tr> tag, 65-66, 89, 180, 183, 192 

<tt> tag, 37, 180-181, 192 

type attribute, 9 1 , 93 

u 

<u> tag, 36, 40, 180, 182, 192 
<ul> tag, 91, 98, 180, 182, 192 
underscore text, 35 
Unicode characters, 195 
uniform resource locator, see URLs 
unknown attributes, 155 
unordered lists, 90-92, 117 
URLs, 157-159 

<a> tag, 157 

domain, 157 

downloading, ftp, 158 

encoding, 167-168 

filename, 158 

host, 157 

href attribute, 157 

links, 158-159 

newsgroups, accessing, 158 

path, 158 

:port, 157 

schemes, 157-158 
user redirection, 155-156 

V 

validation, file, 141 
values 

attributes, 17-18 

colors, 111-112 
<var> tag, 36-37, 180, 182, 192 
version 4.0, 140-141 
vertical frameset, 125—126 
View Page Source (Firefox), 22 
View Source (Internet Explorer), 22 
visual breaks, 20 



w 

yen, character entity, 149 
W3C, 16, 18, 113, 156 
w3schools.com, 1 
Web Safe Colors, 114 
Web pages, 2 
Webservers, 7, 169-172 

Internet Information Server (IIS), 169-171 

Personal Web Server (PWS), 170-172 

professional, 172 

testing, 171 

Windows 7, IIS, 170-171 

Windows 95, PWS, 172 

Windows 98, PWS, 172 

Windows 2000, IIS, 171 

Windows NT, PWS, 172 

Windows support, 170 

Windows Vista, IIS, 170-171 

Windows XP, IIS, 171 
Web sites, 7 
width attribute, 62 
window events, 165 
Windows 7, IIS, 170-171 
Windows 95, PWS, 172 
Windows 98, PWS, 172 
Windows 2000, IIS, 171 
Windows NT, PWS, 172 
Windows support, 170 
Windows Vista, IIS, 170-171 
Windows XP, IIS, 171 
World Wide Web Consortium, see W3C 

x-z 

XML, 16 

<xmp> tag, 37, 180, 182 
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